Web前端笔记（4）

前端完整页面设计：

1. PC端布局：

通栏：自适应浏览器的宽度

版心：固定一个宽度，并让容器居中

页面中需要用到的图片：(由于本人未能找到原版的图片资源，所以只是利用截屏到的图片，进行简单截图后使用，清晰度不够，单用于学习前端学习已足够)

图片资源链接：https://pan.baidu.com/s/1ZhaQ8oc2pGuH5uZvXsxjlQ
提取码：vj93

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>博文尚美</title><link rel="stylesheet" href="../CSS/common.css"><style>#banner{position: relative;}#banner .banner-list{width: 100%;height: 394px;position: relative;}#banner .banner-list li{width: 100%;height: 100%;background: center 0 no-repeat;position: absolute;left: 0;top: 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-btn{width: 100%;position: absolute;         /*需要定位*/bottom: 19px;/*left: 200px;*/z-index: 20;text-align: center;}#banner .banner-btn li{display: inline-block;      /*转换为block，定义大小*/width: 12px;height: 12px;border: 2px solid black;border-radius: 50%;box-sizing: border-box;cursor: pointer;}#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: 81px;height: 81px;margin: 0 auto;}#service .service-list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}#service .service-list p{font-size: 14px;color: #6d6d6d;line-height: 22px;}/*设置背景图片*/#service .service-list li:nth-of-type(1) div{background-image: url("../picture/bowen/3.png");}#service .service-list li:nth-of-type(2) div{background-image: url("../picture/bowen/4.png");}#service .service-list li:nth-of-type(3) div{background-image: url("../picture/bowen/5.png");}#service .service-list li:nth-of-type(4) div{background-image: url("../picture/bowen/6.png");}#case{background: #f8f8f8;}#case .container{min-height: 460px;overflow: hidden;}#case .area-title{margin-top: 55px;}#case .area-title h2{color: #66c5b4;}#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: 15px;line-height: 37px;text-align: center;font-size: 14px;margin-top: 36px;}#case .case-btn a{display: block;width: 100%;height: 100px;color: white;}#news{min-height: 450px;overflow: hidden;    /*防止margin传递，进行溢出隐藏*/}#news .news-list{width: 100%;}#news .news-list li{width: 50%;margin-bottom: 48px;float: left;}#news .area-title {margin-top: 68px;}#news dl{margin-top: 48px;}#news dt{float: left;width: 234px;/*height: 196px;*/}#news dd{float: left;width: 846px;}#news .news-date{float: left;width: 70px;height: 70px;border-right: solid 1px #dcdcdc;text-align: center;}#news .news-date i{color: #66c5b4;font-size: 39px;display: block;font-weight: bold;}#news .news-date span {color: #999999;font-size: 20px;line-height: 36px;}#news .news-text{float: left;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;}</style>
</head>
<body><div id="head" class="container clear"><div class="head-logo l"><a href="#"><img alt="博文尚美" title="博文尚美" src="../picture/bowen/1.png"></a></div><ul class="head-menu r"><li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">PORTFOLIO</a></li><li><a href="#">SERVICE</a></li><li><a href="#">NEWS</a></li><li><a href="#">CONTACT</a></li></ul></div><div id="banner" class="container-fluid">     <!--图片轮播的效果--><ul class="banner-list"><li class="active" style="background-image: url(../picture/bowen/2.png)"><a href="#"></a></li><li style="background-image: url(../picture/bowen/2.png)"><a href="#"></a></li><li style="background-image: url(../picture/bowen/2.png)"><a href="#"></a></li><li style="background-image: url(../picture/bowen/2.png)"><a href="#"></a></li></ul><ol class="banner-btn"><li></li><li></li><li></li><li></li></ol></div><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>企业品牌网站设计/手机网站制作</p><p>动画网站创意设计</p></li><li><div></div><h3>2.GRAPHIC DESIGN</h3><p>标志LOGO设计/产品宣传册设计</p><p>企业广告/海报设计</p></li><li><div></div><h3>3.E-BUSINESS PLAN</h3><p>淘宝天猫装修设计及运营推广</p><p>企业微博，微信营销</p></li><li><div></div><h3>4.MAILBOX AGENT</h3><p>腾讯/网易企业邮箱品牌代理</p><p>个性化邮箱定制开发</p></li></ul></div><div id="case" class="container-fluid"><div class="container"><div class="area-title"><h2>{客户案例}</h2><p>with the best professional technology</p></div><ul class="case-list clear"><li><a href="#"><img alt="" src="../picture/bowen/7.png"></a></li><li><a href="#"><img alt="" src="../picture/bowen/8.png"></a></li><li><a href="#"><img alt="" src="../picture/bowen/9.png"></a></li></ul><div class="case-btn"><a href="#">view more</a></div></div></div><div id="news" class="container"><div class="area-title"><h2>最新资讯</h2><p>THE LATEST NEWS</p></div><dl><dt><img src="../picture/bowen/10.png" alt="" style="width: 234px;height: 196px"></dt><dd><ul class="news-list"><li><div class="news-date"><i>09</i><span>Jan</span></div><div class="news-text"><h3><a href="#">网站排名进入前三的技巧排名</a></h3><p>很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，更不用说进入前三了，那么网站优化的技巧</p></div></li><li><div class="news-date"><i>09</i><span>Jan</span></div><div class="news-text"><h3><a href="#">网站排名进入前三的技巧排名</a></h3><p>很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，更不用说进入前三了，那么网站优化的技巧</p></div></li><li><div class="news-date"><i>09</i><span>Jan</span></div><div class="news-text"><h3><a href="#">网站排名进入前三的技巧排名</a></h3><p>很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，更不用说进入前三了，那么网站优化的技巧</p></div></li><li><div class="news-date"><i>09</i><span>Jan</span></div><div class="news-text"><h3><a href="#">网站排名进入前三的技巧排名</a></h3><p>很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，更不用说进入前三了，那么网站优化的技巧</p></div></li></ul></dd></dl></div><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>
</body>
</html>

通用的CSS样式 common.css

*{margin: 0;padding: 0;
}
ul, ol{list-style: none;
}
img{display: block;
}
a{text-decoration: none;color: #464646;
}
h1, h2, h3, h4, h5, h6{font-size: 16px;
}
body{font-family: Arial, "Microsoft YaHei UI";
}.l {float: left;
}.r{float: right;
}.clear:after{content: "";display: block;clear: both;
}.container{width: 1080px;margin: 0 auto;position: relative;
}.container-fluid{width: 100%;
}#head{height: 81px;
}#head .head-logo{width: 162px;height: 44px;margin-top: 19px;
}#head .head-menu{font-size: 14px;line-height: 81px;
}#head .head-menu li{float: left;margin-left: 58px;
}.area-title{margin-top: 60px;
}.area-title h2{font-size: 20px;height: 20px;line-height: 20px;color: #363636;text-align: center;
}.area-title p{color: #9f9f9f;font-size: 14px;line-height: 34px;text-align: center;
}#foot{background: #66c5b4;
}
#foot .container{height: 54px;font-size: 12px;color: white;
}
#foot p{line-height: 54px;
}
#foot a{line-height: 54px;color: white;margin: 0 18px;
}
#foot div{}

页面的效果：

顺便附上谷歌浏览器截全屏的方法:

参考博客：https://blog.csdn.net/llwy1428/article/details/92834705

Web前端笔记（4）相关推荐

Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签主体框架常用标签标题标签段落标签字体倾斜.加粗.下划线强调内容预设标签字体标签分割线实体字符图片标签视频标签音频标签 ...
WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
Web前端笔记-HTML加载SVG图片及简单修改
加载的用img标签,就可以了,就把他当成普通图片即可,如: <img src="icon/cash-coin.svg" /> 图片是这样的: 在前端的效果就这样了. 简 ...
Web前端笔记（6）
BFC规范: 格式化上下文(Formatting Context)是W3C规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的相关和 ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
（web前端笔记）2020-12-23（http）
总览 web and http web是由对象构成的,包含了html5文档和图片,Java applet. http 无状态的它是以明文的形式保存,有很大的安全问题 https https可以进行加 ...

Web前端笔记（4）

1. PC端布局：

Web前端笔记（4）相关推荐

最新文章

热门文章