永发信息网

帮我优化一段CSS代码.

答案:4  悬赏:0  手机版
解决时间 2021-07-18 22:34

google广告代码的center能不能用css代替！还有那些我觉得无用css id呀 ss cc 标签能不能合并掉！让CSS标准一些。

还有貌似那些div的位置也不标准。高手把他优化一下！保持页面原样就好。

------------------------- 这是网页 --------------------

<!DOCTYPE html>
<html lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试</title>
<style type="text/css">
@charset "UTF-8";
html, body {font: normal 12px "Lucida Grande",Tahoma,Verdana,Lucida,Arial,Helvetica,sans-serif,"宋体";}a, a:link, a:visited, a:active { color: #333; text-decoration: underline; }a:hover { color: #000; text-decoration: underline; }img, a img { color: #fff; vertical-align: middle; }#main{position: relative;margin-top:50px;margin-left:auto;margin-right:auto;width:700px; padding:0 0 0 0;}#frame{position: relative;padding:0 0 0 0;width:600px;margin:0 0 0 0;}#left{ position: relative;padding:0 0 0 0;float:left;width:400px;margin:0 0 0 0;}#add{position: relative;padding:0 0 0 0;float:right;width:200px;margin:0 0 0 0;font-size:20px;}#ss{height:50px;}hr{color:#F1EDF0;}h2 {font-size:28px;font-weight:bold;background:#f0f0f0;margin:0 0 20px 0;}h3 {font-size:28px;font-weight:bold;color:#333333;margin:0 0 10px 0;}.thread {padding:0 0 0 0;color: #000000;font-weight: bold;border-bottom: 1px solid #eee;margin-bottom: 9px;}#cc {clear:both;}#copyright {position: relative;padding:0 0 0 0;text-align:right;width: 580px;}
</style>
</head>
<body>
<div id="main">
<div id="frame">
<div id="left">
<div class="thread"><h3>留言</h3></div>
<p>说明……　　</p>
<p>　　感谢您使用……</p>
<p>评论</p>
<form method="post" action="">
<textarea rows="5" cols="40"></textarea><p>
<input type="submit" name="submit" value="提交" /></p>
</form>

</div>

<div id="ss"></div>
<div id="add">
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-4860885871900357";
google_ad_slot = "9541324742";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src=" http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>

</div>
<div id="cc"></div>
<div id="copyright"><div class="thread"></div>&copy;2009 XXX </div>
</div>
</div>

最佳答案

我不太清楚你所希望到达的效果是怎样的，你所说的那个SS CC是可以去掉的，没什么影响。


我不是高手，所以总感觉这样页面好看些：把id为thread的颜色改为灰色，DIV浮动的位置很正确，


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>测试</title>
<style type="text/css">
charset "UTF-8";
html, body
{
font: normal 12px "Lucida Grande",Tahoma,Verdana,Lucida,Arial,Helvetica,sans-serif,"宋体";

}
a, a:link, a:visited, a:active
{
color: #333; text-decoration: underline;
}
a:hover
{
color: #000; text-decoration: underline;
}
img, a img
{
color: #fff; vertical-align: middle;
}
#main
{
position: relative;margin-top:50px;margin-left:auto;margin-right:auto;width:700px; padding:0 0 0 0;

}
#frame
{
position: relative;padding:0 0 0 0;width:600px;margin:0 0 0 0;
}
#left
{
position: relative;padding:0 0 0 0;float:left;width:400px;margin:0 0 0 0;
}
#add
{
position: relative;padding:0 0 0 0;float:right;width:200px;margin:0 0 0 0;font-size:20px;
}


hr
{
color:#F1EDF0;
}
h2
{
font-size:28px;font-weight:bold;background:#f0f0f0;margin:0 0 20px 0;
}
h3
{
font-size:28px;font-weight:bold;color:#333333;margin:0 0 10px 0;
}
.thread
{
padding:0 0 0 0;color: #000000;font-weight: bold;border-bottom: 1px solid gray;margin-bottom: 9px;
}


#copyright
{
position: relative;padding:0 0 0 0;text-align:right;width: 580px;
}
</style>
</head>
<body>
<div id="main">
<div id="frame">
<div id="left">
<div class="thread"><h3>留言</h3></div>
<p>说明……　　</p>
<p>　　感谢您使用……</p>
<p>评论</p>
<form method="post" action="">
<textarea rows="5" cols="40"></textarea><p>
<input type="submit" name="submit" value="提交" /></p>
</form>


</div>



<div id="add">
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-4860885871900357";
google_ad_slot = "9541324742";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript" src=" http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>


</div>


<div id="copyright"><div class="thread"></div>&copy;2009 XXX </div>
</div>
</div>
</body>
</html>


全部回答

<!DOCTYPE html> <html lang="zh-CN"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试</title> <style type="text/css"> @charset "UTF-8"; html, body {font: normal 12px "Lucida Grande",Tahoma,Verdana,Lucida,Arial,Helvetica,sans-serif,"宋体";} a,a:link,a:visited,a:active {color: #333; text-decoration: underline;} a:hover {color:#000; text-decoration: underline;} img,a img {color:#fff; vertical-align: middle;} #main {margin:50px auto 0;width:700px;} #frame {width:600px;} #left {float:left;width:400px;} #add {float:right;width:200px;font-size:20px;} #ss {height:50px;} hr {color:#f1edf0;} #main,#frame,#left,#add,#copyright {position:relative;} .thread {color:#000;border-bottom:1px solid #eee;margin-bottom:9px;} h2,h3,.thread {font-weight:bold;} h2 {font-size:28px;background:#f0f0f0;margin:0 0 20px 0;} h3 {font-size:28px;color:#333;margin:0 0 10px 0;} #cc {clear:both;} #copyright {text-align:right;width:580px;} </style> </head> <body> <div id="main"> <div id="frame"> <div id="left"> <div class="thread"> <h3>留言</h3> </div> <p>说明……　　</p> <p>感谢您使用……</p> <p>评论</p> <form method="post" action=""> <textarea rows="5" cols="40"></textarea><p> <input type="submit" name="submit" value="提交" /></p> </form>

</div>

<div id="ss"></div> <div id="add"> <center> <script type="text/javascript"><!-- google_ad_client = "pub-4860885871900357"; google_ad_slot = "9541324742"; google_ad_width = 120; google_ad_height = 240; //--> </script> <script type="text/javascript" src=" http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </center>

</div> <div id="cc"></div> <div id="copyright"><div class="thread"></div>&copy;2009 XXX </div> </div> </div> 觉得哪里不好可以继续追问。

优化内容：1、主要合并不同内容的相同属性。

　　　　　2、代码美观性进行了优化。

<!DOCTYPE html> <html lang="zh-CN"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试</title> <style type="text/css"> @charset "UTF-8"; html, body {font: normal 12px "Lucida Grande",Tahoma,Verdana,Arial,,"宋体";} a, a:link, a:visited, a:active { color: #333; text-decoration: underline; } a:hover { color: #000; text-decoration: underline; } img, a img { color: #fff; vertical-align: middle; } #main,#frame,#left,#add,#copyright {position: relative;padding:0 0 0 0;margin:0 0 0 0;} #main{margin-top:50px;margin-left:auto;margin-right:auto;width:700px; } #frame{width:600px;} #left{ float:left;width:400px;} #add{float:right;width:200px;font-size:20px;} #ss{height:50px;}hr{color:#F1EDF0;} h2 {font-size:28px;font-weight:bold;background:#f0f0f0;margin:0 0 20px 0;} h3 {font-size:28px;font-weight:bold;color:#333333;margin:0 0 10px 0;} .thread {padding:0 0 0 0;color: #000000;font-weight: bold;border-bottom: 1px solid #eee;margin-bottom: 9px;} #cc {clear:both;} #copyright {text-align:right;width: 580px;} </style> </head> <body> <div id="main"> <div id="frame"> <div id="left"> <div class="thread"><h3>留言</h3></div> <p>说明……　　</p> <p>　　感谢您使用……</p> <p>评论</p> <form method="post" action=""> <textarea rows="5" cols="40"></textarea><p> <input type="submit" name="submit" value="提交" /></p> </form>

</div>

<div id="add"> <center> <script type="text/javascript"><!-- google_ad_client = "pub-4860885871900357"; google_ad_slot = "9541324742"; google_ad_width = 120; google_ad_height = 240; //--> </script> <script type="text/javascript" src=" http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </center>

</div> <div id="cc"></div> <div id="copyright"><div class="thread"></div>&copy;2009 XXX </div> </div> </div>

--------------------------------------------------------------------------------------------

就是把相同部分合并一下，剩下都是需要的

这样写吧，简化部分不必要的标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试</title> <style type="text/css"> html, body { font: normal 12px "Lucida Grande",Tahoma,Verdana,Lucida,Arial,Helvetica,sans-serif,"宋体"; line-height: 150%; } h1,h5,p,form{ padding: 0; margin: 0; } a, a:link, a:visited, a:active { color: #333; text-decoration: underline; } a:hover { color: #000; text-decoration: underline; } #main{ margin: 50px auto; width: 500px; } #main h1{ padding: 5px 0 5px 0; font-size: 20px; border-bottom: 1px solid #ccc; } .content{ margin: 10px 0 10px 0; } .content h5{ padding: 5px 0 5px 0; font-size: 14px; } .content p{ text-indent: 2em; } #copyright{ margin-top: 10px; padding-top: 5px; text-align: right; border-top: 1px solid #ccc; } form textarea{ height: 80px; width: 100%; } form input{ margin: 5px 0 5px 0; } </style> </head> <body> <div id="main"> <h1>留言</h1> <div class="content"> <h5>说明</h5> <p>感谢您使用……</p> </div> <div>评论：</div> <form method="post" action=""> <textarea></textarea> <input type="submit" name="submit" value="提交" /> </form> <div id="copyright">&copy;2009 XXX </div> </div> </body> </html>

我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
氢氧化银是否是沉淀
帮手写10个英语句子
谁有那种世界地图软件，讲解非常详细的？
别人进不来我的空间
2．如图,已知AB‖CD,∠B=65°,CM平分∠BCE,∠
怎么把浏览器改为最简单的
单机游戏倚天屠龙记的技能怎么学？
有誰知道什麽是陰陽眼？
求几张鲁鲁修单独的头像
从渭南到衡阳火车票价多钱坐多长时间
过O点引n条射线可构成（ ）个角
批发20-30岁，北京哪里的男装比较好看，休闲
鸡和兔一共有8只,腿有22条.你知道鸡和兔各有
关于实习老师的问题
作为一个男孩怎样去忘记一个曾经深爱的女孩
推荐资讯
什么牌子的牙膏洁白效果做好
求英语演讲稿一篇,三分钟左右,用较为简单的语
我想了解今年我在婚姻问题上的结果
爱情与酒有关的诗词,含雪、月、山、水、鸟、
问道5173交易巨额游戏B
计算 lim 根号n·（根号n+1 - 根号n）
沟盖板套什么定额,铁箅子怎么套定额
为什么中国要搞应试考试?
“隼”是什么意思？
把一个圆柱体木头削成一个最大的圆锥体,削去
在高考中计算机专业算文科还是算理科啊？
关于QQ英雄岛装备点化的
正方形一边上任一点到这个正方形两条对角线的
阴历怎么看 ？

网站首页 | 关于我们 | 网站留言
联系永发信息网
Copyright © 2024 永发信息网 版权所有