CSS简单网页示例

article/2025/11/11 12:32:10

简单今日头条页面实现:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>今日头条</title><style>/* 设置body */body{/* 取消doby的内边距 */margin: 0;}/* 设置最底层标签d1 */.d1{/* 设置底层标签的大小 */width: 1200px;height: 805px;/* 设置底层标签的位置 */margin: 0 auto;padding: 0;top: 0;/* 设置底层标签的颜色 */background-color:  #FFFFFF; }.box1,.box2,.box3{/* 设置背景颜色 */background-color:  #FFFFFF;padding-bottom: 5px;}/* 设置图片的样式 */.img_box{margin: 0;padding: 0;float: left;}.box1{/* 设置第一个标签的大小 */width: 100%;height: 85px;}.d2{float: right;padding: ;}/* 设置按钮的样式 */.d1 button{/* 设置登录按钮的大小 */width: 64px;height: 38px;/* 设置按钮及字体颜色 */background-color: #ff4c4c;color: #ffffff;/* 设置外边距 */margin-left: 68px;margin-right: 68px;margin-top: 25px;   border-radius: 5px;border-color: #FFFFFF;}.box2 ul{/* 清除原有图标 */list-style-type: none;/* 设置大小 */width: 190px;height: 396px;padding: 0;float: left;}.box2 li{/* 设置大小 */width: 100%;height: 40px;/* 设置位置 */line-height: 40px;text-align: center;color: #333333;border-radius:5%;}.middle1 li:hover{background-color: #ed4040;color: #FFFFFF;}.box2 .firstli{background-color: #ed4040;color: #FFFFFF;}.middle2{/* 设置大小 */width: 700px;height: 396px;background-color:  #FFFFFF; float: left;margin-top: 20px;}
.title{/* 设置大小 */width: 72px;height: 48px;font-size: 18px;background-color: #FFFFFF;color: #333333;margin-bottom: 0;/* 设置边框 */border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #ff4c4c;}/* 设置标题底部边框 */.middle2 h2{/* 设置边框 */border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #E8E7E3;}/* 设置链接标题 */.box2 .middle2 .link_title{font-size: 20px;color: #000000;text-decoration: none;}/* 设置链接标题的移入效果 */.box2 .middle2 .link_title:hover{color: red;text-decoration: underline;}/* 设置涉及到时间的文字 */.box2 .time{color: #999999;font-size: 13px;}.box2 .middle2 .link_but{width: 30px;height: 23px;line-height: 13px;background-color: red;color: #FFFFFF;font-size: 13px;    }.box2 .middle2 .main_conten{background-color: #FFFFFF;width: 240px;float: left;}.box2 .middle2 img{width: 240px;height: 160px;float: left;}.box2 .middle3{width: 300px;height: 582px;background-color: #FFFFFF;float: left;margin-top: 20px;}.box2 .middle3 .link_puc_right{width: 120px;height: 80px;float: left;}.box2 .middle3 .main_conten{line-height: 50px;}.box2 .middle3 img{width: 50px;height: 50px;position: relative;top: -100px;left: 150px;}.box2 .middle3 .link_title{color: #333333;text-decoration: none;}.bottom_text{width: 400px;font-size: 12px;color: #333333;margin-left: auto;margin-right: auto;text-decoration: none;}.bottom_link{text-decoration: none;color: #333333;}</style></head><body><!-- 最底层标签,用于布局整个界面的位置等 --><div class="d1"><!-- 第一行,用来填入顶部的图片 --><div class="box1"><img src="../img/logo.png" class="img_box"/><img src="../img/advert.jpg" class="img_box"/><div class="d2"><a href="#"><button type="submit">登录</button></a></div></div><!-- 中间部分,用来设置网页主体 --><div class="box2"><!-- 中间部分的左边区域 --><div class="middle1"><ul><li class="firstli">最新发布</li><li>新闻快报</li><li>国内新闻</li><li>国际新闻</li><li>人文风景</li><li>科技创新</li><li>创业俱乐部</li><li>区块链</li><li>互联网</li></ul></div><!-- 中间部分的右边区域 --><div class="middle2"><h2><span class="title">最新发布</span></h2><div class="main_conten"><a href="#" class="link_title">文章标题</a><div class="text"><div class="time">发布于2022-4-23</div><div class="conten">文章摘要...</div><a href="" class="link_but">互联网</a><span>阅读(1024)</span></div><a href="" class="link_puc"><img src="../img/c7y2lxc4ww6kelwdfz.jpg"</a></div><div><a href="#" class="link_title">[腾讯云]12.22云上特惠,云产品限时抢购</a><div class=""><div class="time">发布于2022-3-06</div><div class="conten">腾讯云11.11云上盛惠,精选热门产品助理上云,云服务器首年88元起,买的越多,返的越多,最高返5000元!</div><a href="" class="link_but">互联网</a><span>阅读(564)</span></div><a href=""><img src="../img/cb0wihpicadc7i4hf6.jpg"</a></div></div><!-- 中间部分的右边区域 --><div class="middle3"><h2><span class="title">置顶文章</span></h2><div class="main_conten"><a href="#" class="link_title">文章标题</a><div class="time">2022-4-04</div><img src="../img/c7y2lxc4ww6kelwdfz.jpg" class="link_puc_right"/><a href="" class="link_title">[腾讯云]12.11云上盛惠,云产品限...</a><div class="time">2022-4-15</div></div><img src="../img/cb0wihpicadc7i4hf6.jpg" class="link_puc_right"/></div></div><!-- 底部,用来设置友情链接 --><div class="box3"><h3>友情链接</h3><a href="" class="bottom_link">百度&nbsp;</a><a href="" class="bottom_link">新浪&nbsp;</a><a href="" class="bottom_link">腾讯&nbsp;</a><a href="" class="bottom_link">淘宝</a></div><!-- 最底部,用来放置转义符号等信息 --><div class="bottom_text"><div>&copy;2021 今日头条 京公网安备 11000000000号</div><div>联系电话: 400-156-138</div><span>公司名称: 北京字节跳动科技有限公司 </span><span><a href="" class="bottom_link">管理员登录</a> </span></div></div></body>
</html>