用上HTML和CSS做个网页吧

it2023-06-12 72

今天做学成网首页页面

先分享一些公共样式，每次写CSS都可以先粘贴这些进去哦

本页面的版心是1200px，写如下公共类

.w { width: 1200px; margin: 0 auto; } /* 基础公共样式-开始这些都是CSS的初始化 */ * { margin: 0; padding: 0; } body { font: 14px/1.5 sans-serif; color: #050505; background-color: #f3f5f7; } /* 清除li样式 */ li { list-style: none; } /* 让文字不倾斜 */ em, i { font-style: normal; } /* 取消链接下划线，字体黑色 */ a { text-decoration: none; color: #050505; } a:hover { color: #00a4ff; } img { vertical-align: middle; } button { cursor: pointer; } /* 清除浮动 */ .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* 公共的基础样式-结束 */

页面最顶部：

<div class="header w">  <div class="logo"> <a href="./index.html"><img src="./images/logo.png" alt=""></a> </div>  <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" placeholder="请输入关键词"> <button></button> </div>  <div class="user"> <img src="./images/user.png" alt="">love-qingqing </div> </div>

头部模块样式

/* 头部样式开始 */ .header { height: 70px; padding-top: 30px; } /* logo */ .logo { float: left; width: 195px; height: 40px; } /* 导航 */ .nav { float: left; margin-left: 65px; } .nav ul li { float: left; margin-right: 10px; } .nav ul li a { display: block; font-size: 18px; color: #050505; padding: 0 10px; line-height: 42px; } .nav ul li a:hover { color: #00a4ff; border-bottom: 1px solid #00a4ff; } /* 搜索框 */ .search { float: left; width: 412px; height: 40px; margin-left: 30px; } .search input { float: left; width: 360px; height: 38px; border: 1px solid #00a4ff; } .search button { float: left; width: 50px; height: 40px; background: #00a4ff url(../images/btn.png); border: 0; } /* 用户 */ .user { float: left; height: 33px; margin: 5px 0 0 30px; } /* 头部样式结束 */

banner部分

<div class="banner">  <div class="w">  <div class="subnav"> <ul> <li><a href="#">前端开发<em>></em></a></li> <li><a href="#">后端开发<em>></em></a></li> <li><a href="#">移动开发<em>></em></a></li> <li><a href="#">人工智能<em>></em></a></li> <li><a href="#">商业预测<em>></em></a></li> <li><a href="#">云计算&大数据<em>></em></a></li> <li><a href="#">运维&从测试<em>></em></a></li> <li><a href="#">UI设计<em>></em></a></li> <li><a href="#">产品<em>></em></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> <a href="#">全部课程</a> </ul> </div> </div> </div> </div>

banner部分的样式：

/* banner start */ .banner { height: 420px; background: #1c036c url(../images/banner2_20190819_210028.png) no-repeat center; } /* 侧边栏 */ .subnav { float: left; width: 190px; height: 420px; background-color: rgba(1, 1, 1, .3); } .subnav ul { margin-top: 20px; } .subnav ul li { } .subnav ul li a { display: block; height: 44px; padding: 0 22px; font-size: 14px; color: #fff; } .subnav ul em { float: right; } .subnav ul li a:hover { color: #00b4ff; background-color: rgba(1, 1, 1, .2); } /* 课程表 */ .course { float: right; width: 228px; height: 300px; background-color: #fff; margin-top: 50px; } .course h2 { height: 48px; background-color: #00b4ff; font-size: 18px; color: #fff; text-align: center; line-height: 48px; } .course .bd ul { margin: 22px; } .course .bd ul li { margin-bottom: 10px; border-bottom: 1px solid #e5e5e5; } .course .bd li h4 { font-size: 16px; color: #4e4e4e; } .course .bd li p { font-size: 12px; color: #a5a5a5; } .course .bd ul a{ display: block; width: 180px; height: 40px; border: 1px solid #00b4ff; font-weight: 700; text-align: center; line-height: 40px; } /* banner end */

商品栏模块：

<div class="goods w"> <h3>精品推荐</h3> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Vue</a></li> <li><a href="#">React</a></li> </ul> <a href="#" class="mod">修改兴趣</a> </div>

商品栏模块样式

/* goods start */ .goods { height: 60px; margin-top: 10px; box-shadow: 1px 1px 0 1px rgba(0, 1, 1, .2); line-height: 60px; } .goods h3 { float: left; font-size: 16px; color: #00a4ff; margin-left: 34px; } .goods ul { float: left; margin-left: 30px; } .goods ul li { float: left; } .goods ul li a { padding: 0 35px; border-left: 1px solid #bfbfbf; } .goods>a { float: right; margin-right: 26px; font-size: 14px; color: #00a4ff; } /* goods end */

页面主体

<div class="box w">  <div class="box-hd"> <h3>精品推荐</h3> <a href="#">查看全部</a> </div>  <div class="box-bd">  <ul class="clearfix"> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> </ul> </div> </div>

页面主体样式

/* 精品推荐样式 start */ .box { width: 1215px; margin-top: 10px; } /* 内容头部 */ .box .box-hd { height: 40px; } .box .box-hd h3 { float: left; font-size: 20px; color: #494949; } .box-hd a { float: right; width: 48px; height: 11px; font-size: 12px; color: #a5a5a5; margin: 8px 35px 0 0; } /* 内容主体 */ .box-bd ul li { float: left; width: 228px; height: 270px; margin: 10px 15px 0 0; box-shadow: 1px 1px 0 1px rgba(0, 1, 1, .2); } .box-bd ul li img { width: 228px; } .box-bd ul li h3 { margin: 22px; font-size: 14px; color: #050505; } .box-bd ul li p { margin-left: 23px; color: #606060; } .box-bd ul li span { color: #ff7c2d; } .box-bd ul a:hover h3 { color: red; } /* 精品推荐样式 end */

尾部

<div class="footer w">  <div class="copyright">  <div class="logo"> <a href="./index.html"><img src="./images/logo.png" alt=""></a> </div> <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。 © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p> <a href="#">下载APP</a> </div>  <div class="links"> <dl> <dt><a href="#">关于学成网</a></dt> <dd><a href="#">关于</a></dd> <dd><a href="#">管理团队</a></dd> <dd><a href="#">工作机会</a></dd> <dd><a href="#">客户服务</a></dd> <dd><a href="#">帮助</a></dd> </dl> <dl> <dt><a href="#">新手指南</a></dt> <dd><a href="#">如何注册</a></dd> <dd><a href="#">如何选课</a></dd> <dd><a href="#">如何拿到毕业证</a></dd> <dd><a href="#">学分是什么</a></dd> <dd><a href="#">考试未通过怎么办</a></dd> </dl> <dl> <dt><a href="#">合作伙伴</a></dt> <dd><a href="#">合作机构</a></dd> <dd><a href="#">合作导师</a></dd> </dl> </div> </div>

尾部样式

/* footer start */ .footer { height: 417px; margin-top: 25px; } /* 左侧 */ .footer .copyright { float: left; } .copyright .logo { float: none; } .copyright p { width: 426px; height: 30px; margin-top: 10px; font-size: 12px; color: #666666; } .footer .copyright>a { display: block; margin-top: 15px; width: 120px; height: 36px; text-align: center; line-height: 36px; font-weight: 700; color: #00a4ff; border: 1px solid #00a4ff; } .footer .copyright>a:hover { color: #fff; background-color: #00a4ff; } /* 右侧 */ .footer .links { float: right; } .footer .links dl { float: left; padding: 15px 20px; margin-right: 40px; } .footer .links dt { font-size: 16px; color: #333333; margin-bottom: 10px; } .footer .links dd { font-size: 12px; } /* footer end */

晚自习老想偷个懒儿，好多都内容没加链接应注意：初学CSS时，要多敲多练，切勿盲目复制（复制过去页面效果不佳），嘻嘻。

最新回复(0)