django个人博客网站开发部署源码,网络建设公司起名,wordpress销量最高主题,平台代理是什么工作#x1f353;个人主页#xff1a;bit.. #x1f352;系列专栏#xff1a;Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录 1.案例准备工作 2.CSS属性书写顺序#xff08;重点#xff09; 3.页面布局整体思路 4.头部的制作编辑
5.banner制作… 个人主页bit.. 系列专栏Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录 1.案例准备工作 2.CSS属性书写顺序重点 3.页面布局整体思路 4.头部的制作编辑
5.banner制作 6.精品推荐小模块
7.精品推荐大模块
8.底部模块
9.最终代码 1.案例准备工作
我们本次采取结构与样式相分离思想
创建study目录文件夹用于存放我们整个页面的相关内容用VScode打开这个目录文件夹study目录内新建images文件夹用于保存图片。新建首页文件index.html以后我们的网站首页统一规定为index.html新建style.css样式文件我们本次采用外链样式表将样式引入到我们的HTML页面文件中。link样式表写入清除内外边距的样式来检测样式表是否引入成功。2.CSS属性书写顺序重点
建议遵循一下顺序
布局定位属性display/position/float/clear/visibility/overflow (建议diaplay第一个写毕竟关系到模式)自身属性width/height/margin/padding/border/background文本属性color/font/text-decoration/text-align/vertical-align/white-space/break-word其他属性css3content/cursor/border-radius/box-shadow/text-shadow.....3.页面布局整体思路
为了提高网页制作的效率布局时通常有一下的整体思路
必须确定页面的版型可视区我们测量可得知分析页面中的行模块以及每个行模块中的列模块其实页面布局第一准则一行中的列模块经常浮动布局先确定每个列的大小之后确定列的位置页面布局第二准则。制作HTML结构我们常遵循现有结构后有样式的原则结构永远最重要所以先理清楚布局结构在写代码尤为重要这里需要我梦多写多整理4.头部的制作
导航栏注意点
实际开发中我们不会直接用链接a而是用li包含链接lia的做法。
lia语义更清晰一看这就是条理清晰的列表型内容。如果直接用a搜索引擎更容易辨别为有堆砌关键字的嫌疑故意堆砌关键字容易被搜索引擎有降权的风险从而影响网站的排名。
注意 让导航栏一行显示给li添加浮动因为li时块级元素需要一行显示。这个nav导航栏可以不给宽度将来可以继续添加其余文字。因为导航栏里面文字不一样多所以最好给链接a左右padding撑开盒子而不是指定高度。
search搜索框
一个search大盒子里面包含2个表单 input文本框 button按钮 5.banner制作 1号盒子是通栏的大盒子banner不给宽度给高度给一个蓝色的背景2号盒子是版心需要水平居中3号盒子版心内左对齐subnav4号盒子版心内右对齐course课程6.精品推荐小模块 大盒子水平居中goods 精品注意盒子此处有阴影1号盒子是标题h3右浮动2号盒子里面放链接左浮动goods-item距离可以控制链接的左右外边距注意行内元素只给左右内外边距3号盒子右浮动mod修改
7.精品推荐大模块 1号盒子为最大的盒子box版心水平居中对齐2号盒子为上下面部分box-hd --里面左侧表头H3浮动右侧链接a右浮动3号盒子为底部盒子box-bd-- 里面是无需列表有10个小li组成小li外边距的问题这里有小技巧给box-hd宽度为1215就可以一行装开5个li
8.底部模块 1号盒子是通栏大盒子底部footer给高度底部是白色2号盒子版心水平居中3号盒子版权copyright 左对齐4号盒子链接组 links 右对齐
9.最终代码
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title学成在线首页/titlelink relstylesheet hrefstyle.css
/headbody!-- 1.头部区域开始--div classheader w!-- logo部分 --div classlogoimg srcimages/logo_03.png alt/div!-- 导航栏部分 --div classnavullia href#首页/a/lilia href#课程/a/lilia href#职业规划/a/li/ul/div!-- 搜索模式 --div classsearchinput typetext value输入关键词button/button/div!-- 用户模块 --div classuserimg srcimages/user.png alt qq-lilei/div/div!-- 头部区域结束 --!-- 2.banner部分start --div classbanner!-- 版心 --div classwdiv classsubnavullia href#前端开发span/span/a/lilia href#后端开发span/span/a/lilia href#移动开发span/span/a/lilia href#人工智能span/span/a/lilia href#商业预测span/span/a/lilia href#云计算大数据span/span/a/lilia href#运营从测试span/span/a/lilia href#ul设计span/span/a/lilia href#产品span/span/a/li/ul/div!-- course 课程表模块 --div classcourseh2我的课程表/h2div classbdullih4继续学习 程序语言设计/h4p正在学习-使用对象/p/lilih4继续学习 程序语言设计/h4p正在学习-使用对象/p/lilih4继续学习 程序语言设计/h4p正在学习-使用对象/p/li/ula href# classmore全部课程/a/div/div/div/div!-- banner部分结束 --!-- 3.精品推荐模块开始 --div classgoods wh3精品推荐/h3ullia href#jQuery/a/lilia href#Spark/a/lilia href#MySQL/a/lilia href#Java web/a/lilia href#JavaScript/a/lilia href#jQuery/a/li/ula href# classmod修改兴趣/a/div!-- 精品推荐模式结束 --!-- 4. box核心内容区域开始 --div classbox wdiv classbox-hdh3精品推荐/h3a href#查看全部/a/divdiv classbox-bdul classclearfixliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/liliimg srcimages/pic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span · 1125人在学习/div/li/ul/div/div!-- box核心内容区域结束 --!-- 5.footer 模块制作 --div classfooterdiv classwdiv classcopyrightimg srcimages/logo_03.png altp学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。br © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号/pa href# classapp下载APP/a/divdiv classlinksdldt关于学成网/dtdda href#关于/a/dddda href# 管理团队/a/dddda href# 工作机会/a/dddda href# 客户服务/a/dddda href# 帮助/a/dd/dldldt关于学成网/dtdda href#关于/a/dddda href# 管理团队/a/dddda href# 工作机会/a/dddda href# 客户服务/a/dddda href# 帮助/a/dd/dldldt关于学成网/dtdda href#关于/a/dddda href# 管理团队/a/dddda href# 工作机会/a/dddda href# 客户服务/a/dddda href# 帮助/a/dd/dl/div/div/div
/body/html
style.css
* {margin: 0;padding: 0;
}/* 宽度为1200px 居中对齐 */.w {width: 1200px;margin: 0 auto;
}body {background-color: #f3f5f7;/* height: 3000px; */
}li {list-style: none;
}a {text-decoration: none;
}.clearfix:before,
.clearfix:after {content: ;display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}.header {height: 42px;/* background-color: pink; */margin: 30px auto;
}.logo {float: left;width: 198px;height: 42px;/* background-color: purple; */
}.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;color: #050505;/* text-decoration: none; */
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}/* search 搜索模式 */.search {float: left;width: 412px;height: 42px;background-color: skyblue;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;background: url(images/btn.png);border: 0;
}.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/banner2.png) no-repeat top center;
}.subnav {float: left;width: 190px;height: 421px;background: rgb(0, 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: #9bceee;text-align: center;line-height: 48px;font-size: 18px;color: #fff;
}.bd {padding: 0 20px;
}.bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc;
}.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}.bd ul li p {font-size: 12px;color: #a5a4a5;
}.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;
}/* 精品推荐模式 */.goods {height: 60px;background-color: #fff;box-shadow: 0 2px 3px 3px rgb(0, 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 修改的足够宽一行能撞开5个盒子不久实现换行了吗 */.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;
}.footer {height: 415px;background-color: #fff;
}.footer .w {padding-top: 35px;
}.copyright {float: left;
}.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}.copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px;
}.links {float: right;
}.links dl {float: left;margin-left: 100px;
}.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}.links dl dd a {color: #333;font-size: 12px;
}
