自学网页编程的CSS代码展示：
* { margin: 0; padding: 0; } .w { width: 1200px; margin: auto; } body { background-color: #f3f5f7; height: 3000px; } li { list-style: none; } a { text-decoration: none; } .header { height: 42px; /* 注意此地方会重叠w里面的margin */ margin: 30px auto; } .logo { float: left; width: 198px; height: 42px; } .nav { float: left; margin-left: 60px; } .nav ul li { float: left; margin: 0 15px; } .nav ul li a { display: block; height: 42px; padding: 0 10px; line-height: 42px; font-size: 18px; color: #050505;} .nav ul li a:hover { border-bottom: 2px solid #00a4ff; color: #00a4ff; } /* search搜索模块 */ .search { float: left; width: 412px; height: 42px; margin-left: 70px; } .search input { float: left; width: 345px; height: 40px; border: 1px solid #00a4ff; border-right: 0; color: #bfbfbf; font-size: 14px; padding-left: 15px; } .search button { float: left; width: 50px; height: 42px; /* 按钮button默认有一个边框，需要手动去掉 */ border: 0; background: url(../images/btn.png); } .user { float: right; line-height: 42px; margin-right: 30px; font-size: 14px; color: #666; } /* banner区域 */ .banner { height: 421px; background-color: #1c036c; } .banner .w { height: 421px; background:url(../images/bannerRian.png) no-repeat top center; } .subnav { float: left; width: 190px; height: 421px; background-color:rgba(0, 0, 0, .3); } .subnav ul li{ height: 45px; line-height: 45px; padding: 0 20px; } .subnav ul li a { font-size: 14px; color: #fff; } .subnav ul li a span { float: right; } .subnav ul li a:hover { color: #00a4ff; } .course { float: right; width: 230px; height: 300px; background-color: #fff; /* 浮动的盒子不会用外边距合并的问题 */ margin-top: 50px; }.course h2 { height: 48px; background-color: #9bceea; text-align: center; line-height: 48px; font-size: 20px; color: #fff; } .bd { padding: 0 20px; } .bd ul li { padding: 15px 0; border-bottom: 1px solid #ccc; } .bd ul li h4 { font-size: 16px; color: #4e4e4e; } .bd ul li p { font-size: 12px; color: #a5a5a5; } .bd .more { display: block; height: 38px; border: 1px solid #00a4ff; text-align: center; line-height: 38px; color: #00a4ff; font-size: 16px; font-weight: 700px; margin-top: 5px; } /* 精品推荐模块 */ .goods{ height: 60px; background-color: #fff; box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .1); margin-top: 10px; /* 行高会继承给下面的子元素，所以下面的子元素不用分别给行高 */ line-height: 60px; } .goods h3 { float: left; margin-left: 30px; font-size: 16px; color: #00a4ff; } .goods ul { float: left; margin-left: 30px; } .goods ul li { float: left; } .goods ul li a { padding: 0 30px; font-size: 16px; color: #050505; border-left: 1px solid #ccc; } .mod { float: right; margin-right: 30px; font-size: 14px; color: #00a4ff; } .box { margin-top: 30px; } .box-hd { height: 45px; } .box-hd h3 { float: left; font-size: 20px; color: #494949; } .box-hd a { float: right; font-size: 12px; color: #a5a5a5; margin-top: 10px; margin-right: 30px; } /* 把li 的父元素ul 修改的足够宽一行能装五个盒子，盒子就不会自动换行了 */ .box-bd ul { width: 1225px; } .box-bd ul li { float:left; width: 228px; height: 270px; background-color: #fff; margin-right: 15px; margin-bottom: 15px; } .box-bd ul li img { width: 100%; } .box-bd ul li h4 { margin: 20px 20px 20px 25px; font-size: 14px; color: #050505; font-weight: 400; } .box-bd .info { margin: 0 20px 0 25px; font-size: 12px; color: #999; } .box-bd .info span { color: #ff7c2d; } .box-bd .Rian { margin: 0 20px 0 25px; font-size: 12px; color: #999; } .box-bd .Rian span { color:#ff7c2d; } .pp { height: 60px; background-color: #fff; box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .1); margin-top: 10px; /* 行高会继承给下面的子元素，所以下面的子元素不用分别给行高 */ line-height: 60px; } .pp h3 { float: left; margin-left: 30px; font-size: 16px; color: #00a4ff; } .pp ul{ float: left; margin-left: 30px; } .pp ul li { float: left; } .pp ul li a { padding: 0 30px; font-size: 16px; color: #050505; border-left: 1px solid #ccc; } .oo { float: right; margin-right: 30px; font-size: 14px; color: #00a4ff; } .xy { float: left; margin-top: 30px; } .xy-hd { height: 45px; } .xy-hd h3 { float: left; font-size: 20px; color: #494949; } .xy-hd a { float: right; font-size: 12px; color: #a5a5a5; margin-top: 10px; margin-right: 30px; } .xy-bd ul { width: 1225px; } .xy-bd ul li { float:left; width: 228px; height: 270px; background-color: #fff; margin-right: 15px; margin-bottom: 15px; } .xy-bd ul li img { width: 100%; } .xy-bd ul li h4 { margin: 20px 20px 20px 25px; font-size: 14px; color: #050505; font-weight: 400; } .xy-bd .gg { margin: 0 20px 0 25px; font-size: 12px; color: #999; } .xy-bd .gg span { color: #ff7c2d; }
自学网页编程代码展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线网页</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 头部 区域 --> <div class="header w"> <!-- logo部分 --> <div class="logo"> <img src="C:\Users\Administrator\Desktop\学成在线案例\网页目录\study\images\logo.png" alt=""> </div> <!-- 导航栏部分 nav --> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </div> <!-- 搜索模块 --> <div class="search"> <input type="text" value="输入关键词"> <button></button> </div> <!-- 用户模块 --> <div class="user"> <img src="../images/user.png" alt=""> qq ELiaukRian </div> </div> <!-- 头部区域结束 --> <!-- banner部分开始 --> <div class="banner"> <!-- 版心 --> <div class="w"> <div class="subnav"> <ul> <li><a href="#">前段开发 <span>></span></a></li> <li><a href="#">后端开发 <span>></span></a></li> <li><a href="#">移动开发 <span>></span></a></li> <li><a href="#">人工智能 <span>></span></a></li> <li><a href="#">商业预测 <span>></span></a></li> <li><a href="#">云计算&大数据 <span>></span></a></li> <li><a href="#">运维*从测试<span>></span></a></li> <li><a href="#">UI设计<span>></span></a></li> <li><a href="#">产品 <span>></span></a></li> </ul> </div> <!-- 课程表模块 --> <div class="course"> <h2>我的课程表</h2> <div class="bd"> <ul> <li> <h4>继续学习 程序语言设计</h4> <p>正在学习-使用对象</p> </li> <li> <h4>继续学习 程序语言设计</h4> <p>正在学习-使用对象</p> </li> <li> <h4>继续学习 程序语言设计</h4> <p>正在学习-使用对象</p> </li> </ul> <a href="#" class="more">全部课程</a> </div> </div> </div> </div> <!-- banner结束 --> <!-- 精品推荐模块开始 --> <div class="goods w"> <h3>精品推荐</h3> <ul> <li><a href="#">JQuery</a></li> <li><a href="#">Spark</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">javaWeb</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">javaWeb</a></li> </ul> <a href="#" class="mod">修改兴趣</a> </div> <!-- 精品推荐模块结束 --> <!-- box核心内容区域开始 --> <div class="box w"> <div class="box-hd"> <h3>精品推荐</h3> <a href="#">查看全部</a> </div> <div class="box-bd"> <ul> <li> <img src="../images/图层 133.png" alt=""> <h4>think PHP 5.0 博客系统实战项目演练</h4> <div class="info"> <span>高级</span> • 1125人在学习 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> <li> <img src="../images/背景3.png" alt=""> <h4>重庆大帅比</h4> <div class="Rian"> <span>关注</span> • 1125人喜欢 </div> </li> </ul> </div> </div> <!-- 第二部分 --> <div class="pp w"> <h3>优秀教师</h3> <ul> <li><a href="#">热门</a></li> <li><a href="#">日常</a></li> <li><a href="#">教育</a></li> <li><a href="#">玩耍</a></li> </ul> <a href="#" class="oo">修改兴趣</a> </div><div class="xy w"> <div class="xy-hd"> <h3>优秀教师</h3> <a href="#">查看全部</a> </div> <div class="xy-bd"> <ul> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> <li> <img src="../images/背景6.png" alt=""> <h4>重庆大美女！</h4> <div class="gg"> <span>回头率</span> • 每天1125人。 </div> </li> </ul> </div> </div> <!-- box核心内容区域结束 --> </body> </html> 标签：float,网页,color,编程,自己,height,font,margin,left From： https://www.cnblogs.com/ELiaukRain/p/16913964.html