html网页之静态主页

制作网页之前一定要了解网页的基本结构：

zhizuo

制作网页

ndex.html 这是访问入口，也成为主页

style.css 网站样式装饰元素的文件

这里用到

标签选择器 div{}

类选择器 .box{}

伪类选择器 .box:first-child{}

伪元素选择器 .clearfix:after{}

后代选择器 div li{}

并集选择器 div,span,h4{}

制作style.css文件，依照开发经验可以将css分为

公共模块化比如统配样式 *{}

主模块化 div{}

具体模块化 div li a{}

例如这是本次需要编写的.css文件内容如下：

/*清除默然边距*/*{ padding: 0;margin: 0;}/*双伪元素清除浮动*/.clearfix:after,.clearfix:before{content: "";display: table;}.clearfix:after{clear: both; /*清除浮动*/}.clearfix{ /*ie6 ie7*/*zoom: 1;}/*公共部分*/.contener{/*盒子水平居中*/width: 1200px;margin: 0 auto;}/*页面头部*/body{background-color: #f3f5f7; /*整个页面颜色*/}/*nav导航部分*/nav{width: 1366px;height: 42px;margin: 26px auto; /*导航栏水平居中*//*background-color: #ccc;*/}/*logo图标*/.logo{float: left;}header{height: 100px;overflow: hidden;}/*导航栏部分*/.navbar{float: left;height: 42px; /*这个高给父亲，子类行高会继承*/line-height: 42px; /*字体垂直居中*/margin-left: 50px;}.navbar li{float: left; /*让首页  课程这一行显示*/}.navbar li a{ /*这是a标签的宽高*/padding: 0 10px; /*上下0 左右8像素*/display: block; /* a标签内元素为块级元素*/height: 42px;}.navbar li a:hover{border-bottom: 2px solid #00a4ff; /*鼠标放入底边框*/}ul{list-style: none;}a{color: #050505;text-decoration: none; /*取消下划线*/}/*搜索框部分开始*/.search {width: 410px;  /* 360 + 50 */height: 38px;border: 1px solid #00a4ff;float: right;}.search input[type=text] {  /* 属性选择器  type 为 text 的文本框 *//* background-color: pink; */width: 360px;height: 38px;float: left;padding-left: 20px;}.search input[type=submit]{/* 属性选择器  type 为 submit 的文本框 */width: 50px;height: 38px;float: left;/*background-color: #00a4ff ;*/background: #00a4ff url(../images/search_06.png) center center no-repeat;}input{border: 0;/*所有表格的边框宽度为0*/box-sizing: border-box; /*css3盒子模型，border和padding都包含在width内部*/}/*搜索框部分结束*//*个人中心开始*/.personal{float: right;height: 42px;line-height: 42px;margin: 0 15px 0 35px; /*上0 右15px 下0 左35px*/}.personal img{margin: 0 8px;}/*个人中心结束*//*banner开始*/.banner{height: 420px;background-color: #1c036c;}.banner-in{ /*banner背景图片*/height: 420px;background: url(../images/banner_03.png) 0 0 no-repeat;position: relative; /*子绝父相*/}.slidebar{ /*左侧盒子半透明*/height: 420px;width: 190px;background: rgba(0, 0, 0, .3); /*盒子背景半透明*/float: left;}.slidebar li a{color: #fff;font-size: 14px;padding: 0 20px;display: block; /*转换块级元素*//*height: 42px;*/ /*有了行高，不用给高度 */line-height: 42px;}.slidebar li a:hover {color: #00a4ff;}.slidebar li a span{ /*右侧箭头*/float: right;font-family: arial;}.timetable{ /*我的课程表*/float: right;width: 230px;height: 360px;background-color: #FFF;margin-top: 20px;}.timetable dt{height: 50px;line-height: 50px;background-color: #9bceea;text-align: center; /*文本水平居中*/color: #FFF;font-weight: 700; /*字体加粗*/letter-spacing: 2px; /*字间距为2px*/margin-bottom: 5px;}.timetable dd{height: 60px;width: 193px;/*line-height: 190px;*/margin: 0 auto; /*水平居中*/border-bottom: 1px solid #ccc; /*下边框线*/padding-top: 12px;box-sizing: border-box; /*css3盒子模型*/}.timetable dd:last-child{ /*伪类选择器让最后一个孩子border为0*/border: 0;}.timetable dd h4{font-size: 16px; /*改变字体大小*/font-weight: normal; /*让字体不变粗*/color: #4E4E4E;}.timetable p{font-size: 14px;color: #a5a5a5;}.timetable dd a{ /*全部课程*/height: 38px;border: 1px solid #00a4ff;display: block;text-align: center;line-height: 38px;color: #00a4ff;font-weight: 700; /*文字加粗*/}/*快捷键ctrl+g快速到某一行*/.timetable dd a:hover{background-color: #00a4ff;color: #FFF;}/*小圆点*//*.banner-in ul*/.circle{width: 170px;height: 22px;/*background-color: deeppink;*/position: absolute; /*绝对定位*/bottom: 10px; left: 50%; /*父盒子宽度的一半*/margin-left: -85px;}.circle li{ /*0 0 1 1*/float: left;width: 12px;height: 12px;background: rgba(255, 255, 255, .4); /*背景半透明*/margin: 6px 8px;border-radius: 50%; /*圆角*/}/*当前的圆点*/.circle .current{width: 19px;border-radius: 5px;background-color: #FFF;}/*banner结束*//*精品推荐开始*//*精品推荐*/.recommecd{height: 60px;line-height: 60px;background-color: #fff;margin-top: 8px;box-shadow: 0 2px 2px rgba(0, 0, 0, .2); /*盒子阴影*/}.recommecd a{padding: 0 30px;border-right: 1px solid #ccc;}.recommecd a:hover{color: #00a4ff;}.recommecd a:first-child{color: #00a4ff;}.recommecd a:last-child{color: #00a4ff;border: 0;float: right;font-size: 14px;}/*精品推荐大模块*/.crecom-products{margin-top: 35px; /*距离上边盒子35px*/}.recom-hd{ /*精品推荐标题高度*/height: 40px;}.recom-hd h4{float: left;color: #494949;}.recom-hd a{float: right;margin-top: 10px;margin-right: 30px;font-size: 14px;color: #A5A5A5;}.recom-hd a:hover{color: #00A4ff;}/*精品推荐主题部分*/.recom-bd ul li {width: 228px;height: 270px;background-color: #fff;overflow: hidden;  /* 溢出隐藏 *//* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影； */box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);float: left;margin-right: 15px; /*从右往左排列，间距在右边*//*margin-left: 15px;*/margin-top: 15px;}.recom-bd ul li:nth-child(5n){ /*第五个元素换行*/margin-right: 0;}.recom-bd ul h5,.recom-bd ul p{margin-top: 12px;padding: 0 20px 0 20px;}.recom-bd li h5{font-size: 14px;line-height: 22px;font-weight: normal;}.recom-bd li p{font-size: 12px;color: #999;}.recom-bd p span{color: #FF7C2D;font-size: 20px;}/*精品推荐结束*//*页面底部开始*/footer{height: 270px;background-color: #FFF;margin-top: 100px;}.footer-in{padding-top: 30px;}.footer-l{float: left;}.footer-r{float: right;color: #333;}.footer-l p{font-size: 12px;line-height: 18px;color: #888;margin-top: 20px;}.footer-l a{display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;font-size: 16px;color: #00A4FF;text-align: center;line-height: 33px;margin-top: 15px;}.footer-l a:hover{background-color: #00A4FF;color: white;}.footer-r dl{float: left;width: 180px;}.footer-r dt{font-size: 16px;height: 30px;}.footer-r dd{font-size: 12px;height: 20px;}.footer-r dd:hover{color: #00A4FF;text-decoration: underline; /*下划线*/}/*页面底部结束*/

这是主页.html文件的内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成网官方账号</title><link rel="stylesheet" type="text/css" href="css/style.css"> <!-- 引入css文件 -->
</head>
<body><!-- 结构 --><!-- 页面部分 --><header><!-- nav导航部分 --><nav><!-- logo部分 --><div class="logo"><img src="data:images/logo_03.png" alt="logo图标"></div><!-- 导航栏部分 --><div class="navbar"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 个人中心部分 --><div class="personal"><a href="#">个人中心<img src="data:images/ling_06.png" alt="个人中心"></a><a href="#"><img src="data:images/tou_03.png">刘德华</a></div><!-- 搜索栏部分 --><div class="search"><form action=""><input type="text" placeholder="请输入关键字搜索"><input type="submit" value=""></form></div></nav></header><!-- banner部分 --><div class="banner"><div class="banner-in contener"><!-- 左侧导航栏 侧边栏 --><div class="slidebar"><ul><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">后端开发<span>&gt;</span></a></li><li><a href="#">移动开发<span>&gt;</span></a></li><li><a href="#">人工智能<span>&gt;</span></a></li><li><a href="#">商业预测<span>&gt;</span></a></li><li><a href="#">云计算&大数据<span>&gt;</span></a></li><li><a href="#">运维&从测试<span>&gt;</span></a></li><li><a href="#">UI设计<span>&gt;</span></a></li><li><a href="#">产品设计<span>&gt;</span></a></li><li><a href="#">量身定做<span>&gt;</span></a></li></ul></div><!-- 小课表部分 --><div class="timetable"><dt>我的课程表</dt><dd><h4>小葵花课堂开课了</h4><p>零基础宝宝可以学习的课程</p></dd><dd><h4>海星宝宝正在直播</h4><p>每晚7点准时在线直播开麦</p></dd><dd><h4>上海幼儿园正在招生</h4><p>给宝宝妈妈们一个惊喜</p></dd><dd><h4>小孩的大闹的黄金讲座</h4><p>每晚20点准时开播</p></dd><dd><a href="#">全部课程信息</a></dd></div><!-- 小圆点 --><ul class="circle"><!-- 当前位置 --><li class="current"></li><li></li><li></li><li></li><li></li><li></li></ul></div></div><!-- 精装推荐 --><div class="recommecd contener"><a href="#">精品推荐</a><a href="#">Jquery</a><a href="#">Sqort</a><a href="#">Mysql</a><a href="#">JavaScrit</a><a href="#">Android</a><a href="#">Javaweb</a><a href="#">修改兴趣</a></div><!-- 精品推荐大模块 --><div class="crecom-products contener"><!-- 标题头 --><div class="recom-hd"><h4>精品推荐</h4><a href="#">查看全部</a></div><!-- 精品推荐主题部分 --><div class="recom-bd clearfix">  <!-- 此处需要清除浮动 --><ul><li><div style="width:228px ;height:155px; background: url(icon/icon1.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon2.jpg) no-repeat center top; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon3.jpg) no-repeat center top; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon4.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon5.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon6.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon7.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon8.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon9.jpg) no-repeat center top; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li><li><div style="width:228px ;height:155px; background: url(icon/icon10.jpg) no-repeat center center; background-size: cover; /*background-position: 10px 10px;*/ /*overflow: hidden*/;"></div><h5>Think PHP 5.0 博客系统项目演练</h5><p><span>高级</span> • 1125人在线学习</p></li></ul></div></div><!-- 页面底部 --><footer><div class="footer-in contener"><!-- 页面底部分为左右两部分 --><div class="footer-l"><img src="data:images/logo-s.png" ><p>致力于在线普及中华文明传统美德,引领中国文化在2022年突破新的高度。<br/>© 2022年XTCG Inc.保留权利。-陕GDP备99150045号</p><a href="#">下载APP</a></div><div class="footer-r"><dl><dt>关于学成网</dt><dd>管理团队</dd><dd>工作团队</dd><dd>客户帮助</dd><dd>招兵买马</dd><dd>留言帮助</dd></dl><dl><dt>友情链接</dt><dd>北京大学</dd><dd>重庆大学</dd><dd>山西大学</dd><dd>西藏大学</dd><dd>天山大学</dd></dl><dl><dt>赞助商</dt><dd>何欣欣有限公司</dd><dd>洛尔峰有限公司</dd><dd>你好凤兰有限公司</dd><dd>坑底不吭你有限公司</dd><dd>谁到来有限公司</dd></dl><dl><dt>招商建设</dt><dd>域名购买</dd><dd>广告位投放</dd><dd>开发者建议</dd><dd>培训</dd><dd>留言帮助</dd></dl></div></div></footer>
</body>
</html>

效果图

具体可以参考页面制作出来

html网页之静态主页相关推荐

博客第二课－静态主页
上一课为大家介绍了网页最基本的框架,这一篇我们将扩展上次的框架带大家定制博客的静态主页.什么叫静态页面,从字面上就很好理解,即内容不会动态改变的网页,和用户也没有任何交互,静态页面是动态网页的基础,下 ...
div+css动漫网页制作,dw个人网页设计,静态html+css网页设计
简单个人网页制作大学生网页设计作业静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页作品代码一.作品介绍 1.作品简介 :学生个人网页制作,dw网页设计,静态div+css网页设 ...
怎样判断网页是静态还是伪静态呢
怎样判断网页是静态还是伪静态呢? SEO文章看多了,经常能听到静态.伪静态这类的词语,那什么样的网页是静态的,什么样的网页是伪静态的呢? IE5浏览器以上: 打开你想判断的网站后,再在网址框中输入 ...
动态网页和静态网页的区别是什么？
动态网页和静态网页的区别,首先要分别了解两个概念,就是什么是静态网页,什么是动态网页,并且学会区分哪些是静态哪些是动态. 静态网页: (1)静态网页不能简单地理解成静止不动的网页,他主要指的是网页中没 ...
利用html标记制作静态网页,使用HTML制作网页《静态网页制作》.ppt
使用HTML制作网页<静态网页制作> 表单的执行原理 Internet 1 2 客户端:请求登录,通过表单填写账户信息服务器端:验证发来的账号信息,然后给出反馈客户端和服务器类似两人沟 ...
Python爬虫: 单网页所有静态网页动态网页爬取
Python爬虫: 单网页所有静态网页动态网页爬取前言:所有页代码主干均来自网上!!!感谢大佬们. 其实我对爬虫还挺感兴趣的,因为我玩instagram(需要科学上网),上过IG的人都知道IG虽 ...
动态网页和静态网页的差异
本节介绍本节主要为大家介绍什么是动态网页,什么是静态网页,如果你已经了解了这部分内容,那么可以跳过此篇博文. 静态网页我们说静态网页的内容是无法随着用户的行为而改变网页本身的内容,是固定的,这个内 ...
【常规篇】浏览器被其他网页恶意篡改主页解决办法
[常规篇]浏览器被其他网页恶意篡改主页解决办法发布时间:2021/03/22 - 作者:七夜丶前言相信很多朋友电脑用久了,伴随着软件逐渐增多,尤其是下载带有捆绑软件的时候,浏览器就会被病毒恶意篡 ...
动态网页和静态网页的区别
在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像. ...

html网页之静态主页

html网页之静态主页相关推荐

最新文章

热门文章