基础网页布局练习1-博文尚美

1.项目介绍

博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。

2.项目相关知识点

HTML + CSS
盒子模型 + 浮动 + 定位
部分H5标签和C3属性

3.项目演示图

4.页面布局整体思路

(1).确定网页结构
结构分为5个部分：头部、服务范围、客户案例、最新资讯、尾部
(2).确定页面的版心和通栏
通栏：自适应浏览器宽度
版心：给一个固定宽度，不需要给高度，它可以被内容撑开，并且让容器居中
(3).分析页面中的行模块，以及每行模块中的列模块
(4).每行中的列模块经常浮动布局，因此先确定每列的大小，再确定每列的位置
(5).制作html结构，先有结构，后有样式.
新建 index.html ，创建基本框架。新建css文件夹，里面有两个css文件，分别是公共部分的common.css和首页样式的index.css

5.头部制作

头部是一个公共样式，写在common.css样式中
结构：主体内容在版心内，版心中包含左侧的logo部分和右侧的菜单部分，以及下面通栏的banner部分（轮播图）

common.css设置公共样式

/*清除元素默认的内外边距  */* {margin: 0;padding: 0
}/*让所有斜体 不倾斜*/em,
i {font-style: normal;
}ul,
ol {list-style: none;
}/*图片没有边框   去掉图片底侧的空白缝隙*/img {border: 0;/*ie6*/display: block;
}/*取消链接的下划线*/a {color: #646464;text-decoration: none;
}h1,
h2,
h3 {font-size: 16px;
}body {font: 12px/1.5 'Microsoft YaHei', 'Arial';
}/*清除浮动*/.clearfix:after {clear: both;display: block;content: "";
}.l {float: left;
}.r {float: right;
}
/* 版心 */
.container {width: 1080px;margin: 0 auto;position: relative;
}/* 通栏 */.container-fluid {width: 100%;
}

编写head部分的html结构

<div id="head" class="container"><div class="head_logo l"><a href=""><img src="./image/logo.png" alt="" title=""></a></div><ul class="head_menu r"><li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">PROTFOLIO</a></li><li><a href="#">SERVICE</a></li><li><a href="#">NEW</a></li><li><a href="#">CONTACT</a></li></ul></div>

为head部分添加css样式

#head {height: 80px;
}#head .head_logo a {display: block;float: left;width: 170px;height: 80px;background: url(../image/logo.png) no-repeat 0 0;
}#head .head_menu {font-size: 14px;line-height: 80px;
}#head .head_menu li {float: left;margin-left: 58px;
}

编写banner部分的html结构

<div id="banner" class="container-fluid"><ul class="banner_list"><li class="active" style="background:url(./image/banner1.jpg) no-repeat center  0"><a href="#"></a></li><li style="background:url(./image/banner2.jpg) no-repeat center  0"><a href="#"></a></li><li style="background:url(./image/banner3.jpg) no-repeat center  0"><a href="#"></a></li><li style="background:url(./image/banner4.jpg) no-repeat center  0"><a href="#"></a></li></ul><ol class="banner_button"><li class="active"></li><li></li><li></li><li></li></ol></div>

为banner部分添加css样式

#banner {position: relative;
}#banner .banner_list {width: 100%;height: 469px;position: relative;
}#banner .banner_list li {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: center no-repeat 0;opacity: 0;z-index: 1;
}#banner .banner_list a {display: block;width: 100%;height: 100%;
}#banner .banner_list li.active {opacity: 1;z-index: 10;
}#banner .banner_button {position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;width: 100%;
}#banner .banner_button li {display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;
}#banner .banner_button li.active {background: white;
}

6.服务范围部分制作

结构：主体内容在版心区域内，一条线和一个小圆点的组合图形是一个通用样式，写在common.css中
一条线和一个小圆点的组合图形的css样式

.area_title {margin-top: 60px;text-align: center;
}.area_title h2 {height: 20px;line-height: 20px;font-size: 20px;color: #363636;font-weight: normal;background: url(../image/titbg.jpg) no-repeat center 0;
}.area_title p {color: #9F9F9F;font-size: 14px;line-height: 34px;
}

编写服务范围部分的html结构

<div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR SERVICE</p></div><ul class="service_list"><li><div></div><h3>1.WEB DESIGN</h3><p>企业品牌网站设计/手机网站制作<br> 动画网站创意</p></li><li><div></div><h3>2.GRAPHIC DESIGN</h3><p>标志logo设计/产品宣传设计<br> 企业广告/海报设计</p></li><li><div></div><h3>3.E-BUSINESS PLAN</h3><p>淘宝 / 天猫装修设计及运营推广<br> 企业微博 / 微信营销</p></li><li><div></div><h3>4.MAILBOX AGENTS</h3><p>腾讯 / 网易企业邮箱品牌代理<br> 个性化邮箱定制开发</p></li></ul></div>

为服务范围部分添加css样式

#service {overflow: hidden;min-height: 407px;
}#service .service_list {text-align: center;margin-top: 34px;
}#service .service_list li {float: left;width: 250px;margin: 0 10px;
}#service .service_list div {width: 102px;height: 102px;margin: 0 auto;
}#service .service_list li:nth-of-type(1) div {background: url(../image/web1.png);
}#service .service_list li:nth-of-type(2) div {background: url(../image/e-bussiness1.png);
}#service .service_list li:nth-of-type(3) div {background: url(../image/graphic1.png);
}#service .service_list li:nth-of-type(4) div {background: url(../image/mail1.png);
}#service .service_list h3 {font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;font-weight: normal;
}#service .service_list p {font-size: 14px;color: #6D6D6D;line-height: 22px;
}

7.客户案例部分制作

编写客户案例部分的html结构

 <div id="case" class="container-fluid"><div class="container"><div class="area_title_none"><h2>［ 客户案例 ］</h2><p>With the best professional technology, to design the best innovative web site</p></div><ul class="case_list clearfix"><li><a href="#"><img src="./image/20141121095216750.jpg" alt=""></a></li><li><a href="#"><img src="./image/20141121095528549.jpg" alt=""></a></li><li><a href="#"><img src="./image/20141121105856226.jpg" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW MORE</a></div></div></div>

为客户案例部分添加css样式

#case {background: #F8F8F8;
}#case .container {min-height: 460px;overflow: hidden;
}#case .area_title_none {margin-top: 55px;text-align: center;
}#case .area_title_none h2 {color: #66C5B4;height: 20px;font-size: 20px;line-height: 20px;font-weight: normal;
}#case .area_title_none p {color: #9F9F9F;font-size: 14px;line-height: 34px;
}#case .case_list {margin-top: 28px;
}#case .case_list li {float: left;width: 340px;margin: 0 10px;
}#case .case_btn {width: 176px;height: 37px;background: #66C5B4;margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;color: #FFF;font-size: 14px;margin-top: 36px;
}#case .case_btn a {display: block;width: 100%;height: 100%;color: #FFF;
}

8.最新资讯部分的制作

编写最新资讯的html结构

<div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>TEH LATEST NEWS</p></div><dl><dt><img src="./image/xs1.jpg" alt=""></dt><dd><ul class="news_list"><li><div class="news_date l"><i>09</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">漳州西恩视觉婚纱摄影网站建设</a></h3><p>漳州西恩视觉婚纱摄影隶属西恩视觉文化传播有限公司旗下婚纱摄影品牌，由国内著名摄影师冬晖CHAN...</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">网站数据统计用哪种比较好?</a></h3><p>网站数据统计代码是平常网站建设过程中最受用户青睐的数据统计工具，几乎每个用户的网站程序都会...</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">厦门网站建设服务的内容主要有哪些？</a></h3><p>大多数用户建网站由于都是头一次接触，对于网站建设并不了解，往往会误认为找网站建设公司建网站...</p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">海石景观股份有限公司网站设计案例解析</a></h3><p>此次网站整体设计采用扁平化的的风格、简约式排版，网站主视觉区采用大面积的视觉效果图，以动画...</p></div></li></ul></dd></dl></div>

为最新资讯部分添加css样式

#news {min-height: 450px;overflow: hidden;
}#news dl {margin-top: 48px;
}#news .area_title {margin-top: 65px;
}#news dt {float: left;width: 234px;
}#news dd {float: left;width: 846px;
}#news .news_list {width: 100%;
}#news .news_list li {width: 50%;float: left;margin-bottom: 48PX;
}#news .news_date {width: 71px;height: 71px;border-right: 1px solid #DCDCDC;text-align: center;
}#news .news_date i {color: #66C5B4;font-size: 39px;display: block;font-weight: bold;
}#news .news_date span {color: #999;font-size: 20px;line-height: 36px;
}#news .news_text {width: 310px;margin-left: 20px;
}#news .news_text h3 {font-size: 14px;
}#news .news_text h3 a {color: #3F3F3F;
}#news .news_text p {color: #A4A4A4;font-size: 12PX;line-height: 21PX;margin-top: 17px;
}

9.尾部制作

编写尾部部分的html结构

 <div id="foot" class="container_fluid"><div class="container"><p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p><div class="r"><a href="#">Home</a>|<a href="#">About</a>|<a href="#">Portfolio</a>|<a href="#">Contact</a></div></div></div>

为尾部部分添加css样式

#foot {background: #66C5B4;
}#foot .container {height: 54px;line-height: 54px;font-size: 12px;color: #FFF;
}#foot div a {color: #FFF;margin: 0 10px;
}

10.素材资源
https://www.17sucai.com/preview/330046/2015-08-19/%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E/index.html

总结
css基础一定要学扎实，不要因为css样式写得多烂，界面有多难看，而不去坚持练习。一定要多看多写，多看多写，多看多写，重要的事情说三遍！！！要反复去使用自己学会的东西，不要学了而不去使用它们，这样会很快忘掉已学过的知识。

基础网页布局练习1-博文尚美相关推荐

CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
网页制作练习-博文尚美页面
文章目录 1.前言 2.页面整体效果 3.前期准备 3.1素材 3.2CSS样式 4.各部分代码 4.1顶部导航 4.2主页大照片 4.3服务范围面板 4.4客户案例面板 4.5最新资讯面板 4.6网 ...
CSS布局模型/网页布局基础
CSS布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
【恢复】慕课网《网页布局基础》学习笔记
好久之前,最初入坑前端时的学习笔记.那时候「慕课网」的几个路径还是免费的,也有好几个跟网页布局有关的课程,其中有一个叫<网页布局基础>讲得很棒,那时候刚好喜欢上 markdown 写作,于 ...
HTML/CSS——PC端博文尚美网页
源代码 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
文章目录一.视口 1.布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2.视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3.理想视口 ( 网页大小 = 设备大小 ) 一 ...
Flex布局搭建网页布局更方便
阮一峰的网络日志 » 首页 » 档案上一篇:ES6 的功能侦测库下一篇:Flex 布局教程:实分类: 开发者手册 Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布 ...
PS网页设计教程XIX——在Photoshop中创建一个优雅的作品集的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
前端HTML5+CSS3静态页面开发-博文尚美
前端html5+css3静态页面开发-博文尚美项目介绍博文尚美是一个设计网站, 此项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,对html和css的使用及 ...

基础网页布局练习1-博文尚美

基础网页布局练习1-博文尚美相关推荐

最新文章

热门文章