HTML-CSS静态页面实现-仿博文尚美首页

最新推荐文章于 2022-07-31 19:02:22 发布
最新推荐文章于 2022-07-31 19:02:22 发布
阅读量956 收藏 12
点赞数 4
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730244/article/details/116142978
版权
HTML 同时被 2 个专栏收录
67 篇文章 2 订阅
订阅专栏
CSS
65 篇文章 3 订阅
订阅专栏

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<!-- https://www.17sucai.com/preview/330046/2015-08-19/%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E/index.html
		
		https://www.zcool.com.cn/work/ZNjIzOTEwNA==.html?switchPage=on -->
		
		<meta charset="utf-8">
		<title></title>
		<!-- 公用部分 -->
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<!-- 头部 -->
		<link rel="stylesheet" type="text/css" href="./css/header.css" />
		<!-- 轮播 -->
		<link rel="stylesheet" type="text/css" href="./css/lunbo.css"/>
		<!-- 服务范围 -->
		<link rel="stylesheet" type="text/css" href="css/service.css" />
		<!-- 客户咨询 -->
		<link rel="stylesheet" type="text/css" href="css/service2.css" />
		<!-- 最新资讯 -->
		<link rel="stylesheet" type="text/css" href="css/service3.css" />
		<!-- 底部 -->
		<link rel="stylesheet" type="text/css" href="./css/footer.css"/>
		
		<base href="#" target="_blank" />
	</head>
	<body>
		<header>
			<div class="headCon banxin clearfloat">
				<div class="logo">
					<img src="./img/logo.png">
				</div>
				<div class="menu">
					<ul>
						<li><a href="">首页</a></li>
						<li><a href="#">关于我们</a></li>
						<li><a href="#">客户案例</a></li>
						<li><a href="#">服务项目</a></li>
						<li><a href="#">新闻资讯</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
			</div>

		</header>
		<div class="lunbo">
			<div class="image clearfloat ">
				<ul>
					<li>
						<a href=""><img src="./img/lunbo.jpg"></a>
					</li>
					<li>
						<a href=""><img src="./img/lunbo2.jpg"></a>
					</li>
					<li>
						<a href=""><img src="./img/lunbo3.jpg"></a>
					</li>
					<li>
						<a href=""><img src="./img/lunbo4.jpg"></a>
					</li>
				</ul>
			</div>
			
			<div class="disc clearfloat">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="content clearfloat">
			<div class="service banxin clearfloat">
				<div class="content line_disc">
					<div class="line"></div>
					<div class="disc"></div>
					<div class="title">
						<p class="ch">服务范围</p>
						<p class="en">OUR SERVICE</p>
					</div>
					<div class="disc"></div>
					<div class="line"></div>
				</div>
				<div class="list">
					<ul>
						<li>
							<div class="image">
								<img src="img/list1_1.png">
							</div>
							<div class="title">1.WEB DESIGN</div>
							<p>企业品牌网站设置/手机网站制作</p>
							<p>动画网站创意设计</p>
						</li>
						<li class="bot">
							<div class="image">
								<img src="img/list1_1.png">
							</div>
							<div class="title">1.WEB DESIGN</div>
							<p>企业品牌网站设置/手机网站制作</p>
							<p>动画网站创意设计</p>
						</li>
						<li>
							<div class="image">
								<img src="img/list1_1.png">
							</div>
							<div class="title">1.WEB DESIGN</div>
							<p>企业品牌网站设置/手机网站制作</p>
							<p>动画网站创意设计</p>
						</li>
						<li>
							<div class="image">
								<img src="img/list1_1.png">
							</div>
							<div class="title">1.WEB DESIGN</div>
							<p>企业品牌网站设置/手机网站制作</p>
							<p>动画网站创意设计</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="service2">
				<div class="content banxin">
					
						<div class="title">
							<div class="title1">{ 客户咨询 }</div>
							<p class="en">With the best professional technology,to design the best innovative web site</p>
						</div>
						
					
					
					<div class="list clearfloat">
						<ul>
							<li><img src="./img/li2_1.png"></li>
							<li><img src="./img/li2_2.png"></li>
							<li><img src="./img/list2_3.png"></li>
						</ul>
					</div>
					<div class="button">
						VIEW MORE
					</div>
				</div>
			</div>
			<div class="service3 service banxin">
				<div class="content line_disc" id="ser3Con">
					<div class="line"></div>
					<div class="disc"></div>
					<div class="title">
						<p class="ch">最新资讯</p>
						<p class="en">THE LATEST NEWS</p>
					</div>
					<div class="disc"></div>
					<div class="line"></div>
				</div>
				<div class="detail clearfloat">
					<div class="image">
						<img src="./img/laat.png">
					</div>
					<div class="list3 clearfloat">
						<ul>
							<li>
								<div class="data clearfloat">
									<div class="day">
										28
									</div>
									<div class="month">
										OCT
									</div>
								</div>
								<div class="detail">
									<div class="title">选择虚拟机常见的几个注意事项</div>
									<p>
										无论是企业网站也好，还是个人网站也好。做网站多需要购买虚拟...
									</p>
								</div>

							</li>
							<li>
								<div class="data clearfloat">
									<div class="day">
										28
									</div>
									<div class="month">
										OCT
									</div>
								</div>
								<div class="detail">
									<div class="title">选择虚拟机常见的几个注意事项</div>
									<p>
										无论是企业网站也好，还是个人网站也好。做网站多需要购买虚拟...
									</p>
								</div>
							</li>
							<li>
								<div class="data clearfloat">
									<div class="day">
										28
									</div>
									<div class="month">
										OCT
									</div>
								</div>
								<div class="detail">
									<div class="title">选择虚拟机常见的几个注意事项</div>
									<p>
										无论是企业网站也好，还是个人网站也好。做网站多需要购买虚拟...
									</p>
								</div>
							</li>
							<li>
								<div class="data clearfloat">
									<div class="day">
										28
									</div>
									<div class="month">
										OCT
									</div>
								</div>
								<div class="detail">
									<div class="title">选择虚拟机常见的几个注意事项</div>
									<p>
										无论是企业网站也好，还是个人网站也好。做网站多需要购买虚拟...
									</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<div class="footer banxin clearfloat">
				<div class="left">Copyright 2006-2014 Bowenshangmei Culture All Rights Reserved</div>
				<div class="right clearfloat">
					<ul>
						<li>
							<div class="txt">Home</div>
						</li>
						<li>
							<div class="txt">About</div>
						</li>
						<li>
							<div class="txt">Contact</div>
						</li>
						<li>
							<div class="txt">Profile</div>
						</li>
					</ul>
				</div>
			</div>
		</footer>
	</body>
</html>

CSS代码：
重置样式和公共样式：

* {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}
a{
	color: #000000;
	text-decoration: none;
}
.clearfloat::after {
	content: '';
	display: block;
	clear: both;
}

.banxin {
	width: 1080px;
	margin: 0 auto;
}

头部：

	/* 头部 */
			header{
				position: sticky;
				top: 0;
				background-color: rgba(255,255,255,0.5);
			}
			.headCon{
				height: 75px;
				
				top: 0;
				
				z-index: 1;
				line-height: 75px;
			}
			/* 头部标题 */
			.headCon .logo{
				float: left;
				height: 75px;
				
			}
			.headCon .logo img{
				margin-top: 12px;
			}
		
			/* 头部右侧列表 */
			.headCon .menu{
				/* width: 652px; */
				/* height: 75px; */
				float: right;
				padding: 0px 15px;
			}
			.headCon .menu ul li{
				
				font-size: 20px;
				float: left;
				margin-right: 65px;
			}
			
			.headCon .menu ul li:first-child a{
				color: #66c5b4;
			}
			.headCon .menu ul li:last-child{
				margin-right: 0;
			}

轮播图：

/* 中间轮播部分 */
			.lunbo {
				margin-top: 8px;
				/* text-align: center; */
				position: relative;
				overflow: hidden;
			}
			.lunbo .image {
				margin: auto;
				width: 1365px;
				height: 500px;
				position: relative;
			}
			.lunbo .image ul li{
				position: absolute;
				left: 0;
				top: 0;
			}
			.lunbo .disc{
				position: absolute;
				
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				
			}
			.lunbo .disc ul li{
				float: left;
				height: 12px;
				width: 12px;
				border-radius: 6px;
				border: 1px solid white;
				background-color:transparent;
				margin-right: 10px;
			}
			.lunbo .disc ul li:hover{
				cursor: pointer;
				background-color:white;
			}
			.lunbo .disc ul li:last-child{
				margin-right: 0;
			}

服务范围：

/* 服务范围 */
			.service{
				margin-top: 55px;
				height: 428px;
			}
			/* 服务范围-标题部分 */
			.service .content{
				padding: 0 7px;
				width: 326px;
				margin: 0 auto;
				height: 45px;
				
			}
			
			.service .content div{
				float: left;
			}
			/* 服务范围-标题部分-左右横线 */
			.line_disc .line{
				margin-top: 12px;
				border: 1px solid #e4e4e4;
				width: 85px;
				
			}
			/* 服务范围-标题部分-左右圆点 */
			.line_disc .disc{
				margin-top: 8px;
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background-color: #e4e4e4;
			}
			/* 服务范围-标题部分 -题目*/
			.line_disc  .title{
				width: 130px;
				height: 45px;
				text-align: center;
			}
			.line_disc .title .ch{
				font-size: 20px;
				color: #737373;
			}
			.line_disc  .title .en{
				margin-top: 5px;
				color: #CCCCCC;
				font-size: 8px;
			}
			/* 服务范围-列表部分 */
			.service .list{
				margin-top: 40px;
				height: 240px;
				padding: 0 10px;
				/* background-color: #00FFFF; */
			}
			.service .list ul li{
				width: 250px;
				height: 239px;
				
				float: left;
				margin-right: 20px;
				text-align: center;
			}
			.service .list ul li:last-child{
				margin-right: 0;
			}
			.service .list ul li .title{
				line-height: 70px;
				height: 70px;
				color: #717171;
				
			}
			.service .list ul li p{
				color: #a6a6a6;
			}
			.service .list ul .bot{
				border-bottom: 5px solid #90d7c7;
			}
			.service .list ul li p:last-child{
				margin-top: 8px;
				
			}

客户案例：

/* 客户案例 */
			.service2{
				height: 465px;
				background-color: #f8f8f8;
				overflow: hidden;
			}
			/* 客户案例 版心 */
			.service2 .content{
				
				height: 445px;
				margin-top: 20px;
				overflow: hidden;
			}
			/* 客户案例 标题 */
			.service2 .content .title{
				margin: 0 auto;
				height: 80px;
				margin-top: 40px;
				text-align: center;
			}
			.service2 .content .title .title1{
				color: #8dd1c2;
				font-size: 20px;
			}
			.service2 .content .title p{
				margin-top: 15px;
				
				color: #9d9d9d;
			}
			/* 客户案例 图片列表*/
			.service2 .content .list{
				height: 185px;
			}
			.service2 .content .list ul li{
				float: left;
				width: 340px;
				height: 185px;
				background-color: #717171;
				margin-right: 30px;
			}
			.service2 .content .list ul li:last-child{
				margin-right: 0;
			}
			/* 客户案例 按钮*/
			.service2 .content .button{
				color: white;
				margin: 0 auto;
				margin-top: 40px;
				width: 170px;
				background-color: #63c6b1;
				text-align: center;
				height: 30px;
				line-height: 30px;
				border-radius: 15px;
				font-size: 10px;
			}

最新资讯：

/* 最新资讯 */
			.service3{
				height: 400px;
			}
			.service3 #ser3Con{
				width: 340px;
				height: 148px;
				
				margin: 0 auto;
				
			}
			/* 最新资讯  于服务范围区别样式设置*/
			.service3 #ser3Con .line{
				margin-top: 65px;
			}
			.service3 #ser3Con .disc{
				margin-top: 60px;
			}
			.service3 #ser3Con .title{
				margin-top: 50px;
			}
			.service3 .detail{
				height: 195px;
				
			}
			/* 最新资讯 左部图片*/
			.service3 .detail .image img{
				vertical-align: bottom;
			}
			.service3 .detail .image{
				float: left;
				border:3px solid #e5e5e7
			}
			/* 最新资讯 右侧列表*/
			.service3 .detail .list3{
				width: 825px;
					margin-left: 20px;
					float: left;
					height: 190px;
					
			}
			/* 最新资讯 列表部分*/
			.service3 .detail .list3 ul li{
				float: left;
				height: 75px;
				width: 385px;
			
			}
			/* 最新资讯 给每行第一个增加右侧距离*/
			.service3 .detail .list3 ul li:nth-child(2n+1){
				margin-right: 55px;
			}
			.service3 .detail .list3 ul li:nth-child(3){
				margin-top: 40px;
			}
			.service3 .detail .list3 ul li:nth-child(4){
				margin-top: 40px;
			}
			/* 最新资讯 列表部分 左侧日期部分*/
			.service3 .detail .list3 ul li .data{
				float: left;
				width: 60px;
				height: 75px;
				border-right: 1px solid #e5e5e7;
				overflow: hidden;
			}
			/* 最新资讯 列表部分 左侧日期部分  天数*/
			.service3 .detail .list3 ul li .data .day{
				font-size: 25px;
				margin-top: 12px;
				color: #69c4b5;
				font-weight: bold;
			}
			/* 最新资讯 列表部分 左侧日期部分 月？*/
			.service3 .detail .list3 ul li .data .month{
				font-size: 12px;
				color: #bbbbbb;
			}
			/* 最新资讯 列表部分 右侧*/
			.service3 .detail .list3 ul li .detail{
				float: right;
				width: 300px;
				height: 75px;
				
			}
			.service3 .detail .list3 ul li p{
				margin-top: 15px;
				font-size: 12px;
				color:#aeaeae
			}

页脚：


			/* 底部 */
			footer{
				background-color: #67c5b5;
				height: 55px;
			}
			.footer{
				
				height: 55px;
				
			}
			.footer .left{
				float: left;
				width: 360px;
				height: 55px;
				line-height: 55px;
				color: white;
				font-size: 8px;
				
			}
			.footer .right{
				float: right;
				
				height: 55px;
				
				
			}
			/* 底部右侧列表  */
			.footer .right ul li{
				float: left;
				font-size: 8px;
				margin-top:20px ;
				color: white;
			}
			.footer .right ul li .txt{
				height: 12px;
				line-height: 12px;
				border-right: 1px solid white;
				text-align: center;
				padding: 0 10px;
			}

原图：在这里插入图片描述

仿图：

在这里插入图片描述

原首页链接：https://www.17sucai.com/preview/330046/2015-08-19/%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E/index.html
因为这个页面比较简单，我就没有给太多注释，如果大家又碰到什么问题，可以随时问我。或者是觉得我的代码哪里有什么不足的，还望指正。（等我有空在上传到github哈）

每天进步一大步
关注
专栏目录
html静态网页生成器_使用了静态网页生成器：从WordPress 到 Hugo
weixin_39866867的博客
11-03 1478
2020.10.6 增补：又换回了 Hugo，使用 Github 和 Netlify 托管，真香。2020.7.27 增补 ： 博客地址已更变为 https://xd.sh.cn ，并从Hugo迁移回了WordPress，WordPress 真香。----- 以下是原文 ------之前立过一个flag，说并不会把博客变为静态的，依然使用wordpress作为博客的主力。但是基于考试考完闲着蛋疼、...
基于CSS下的HTML静态网页
weixin_45611586的博客
04-14 505
基于CSS下的HTML静态网页 前言 文章主要讲解HTML5和css结合编写出的简易静态网页，主要运用css技术将HTML5的界面进行完善。 提示：以下内容为作者原创，请礼貌参考 一、什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 二、什么是CSS？ CSS 指的是层叠样式表* (
博文尚美首页html,博文尚美首页制作
weixin_35473679的博客
06-18 854
涉及到的知识点PC端的布局通栏container-fluid：自适应浏览器的宽度版心container：固定一个宽度，并且让容器居中margin值类型auto：设置为浏览器边距(会依赖于浏览器)确切数值百分比外边距简写margin:25px 50px 75px 100px;//上边距为25px,右边距为50px,下边距为75px,左边距为100px(顺时针)margin:25px 50px 75p...
博文尚美前端页面html
xiaoquan1997的博客
06-22 363
博文尚美主页自己以前写的
HTML/CSS——PC端博文尚美网页
热门推荐
无限迭代中......
08-04 1万+
原作品效果： 仿制品效果： 代码： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
前端HTML5+CSS3静态页面开发-博文尚美
weixin_45997173的博客
07-25 8081
前端html5+css3静态页面开发-博文尚美 项目介绍 博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。 项目相关知识点 HTML + CSS 盒子模型 + 浮动 + 定位 部分H5标签和C3属性 项目演示图 实现步骤 1.在新建 index.html 中，创建基本框架，在标签里面使用标 签引入 index.css。 2.清除 css 默认样式，添加预设样式。代码如下：
博文尚美首页psd.psd
02-02
这是一个用来练习PC端操作的psd文件
基础网页布局练习1-博文尚美
m0_37643322的博客
09-24 1285
1.项目介绍 博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。 2.项目相关知识点 HTML + CSS 盒子模型 + 浮动 + 定位 部分H5标签和C3属性 3.项目演示图 4.页面布局整体思路 (1).确定网页结构 结构分为5个部分：头部、服务范围、客户案例、最新资讯、尾部 (2).确定页面的版心和通栏 通栏：自适应浏览器宽度 版心：给一个固定宽度，不需要给高度，它可
博文尚美 居中（已知宽度和未知宽度）的实现案例
weixin_52269009的博客
01-21 181
已知宽度时，在垂直方向上：设置height属性值与line-height属性值相等 （博文尚美案例：在一个标题栏中，分为logo和nav两部分： 若添加line-height属性值后，则显示居中对齐 在水平方向上，可以通过margin: 0 auto实现居中对齐： 未知宽度时，垂直方向和水平方向上都可以通过transform属性来设置 translateX（）或 translateY（） ...
博文尚美小圆点位置
PEI__QI的博客
01-20 321
博文尚美小圆点位置 一、决定定位 banner .banner-list{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); 二、垂直居中 .banner .banner-list{ position: absolute; bottom: 50%; right: 0; transform: translateX(-50%); } .banne
html静态页面生成
04-20
通过.NET后台，批量生成静态html页面，实用性强且容易掌握。
htmldecoder:一个简单的静态网站生成器
05-02
htmldecoder 由Zydecx htmldecoder是一个简单的静态网站生成器。 有了它，您就可以专注于自己的内容，而摆脱琐碎的事情，例如分页/类别/标签/搜索htmldecoder现在正迈出第一步，欢迎您加入以使其更好。 htmldecoder用Java开发，并用jdk1.7编译。 较旧的jdk版本可能无法正常工作。 使用Maven安排了项目，并且可以将其打包为jar文件运行（类路径中应包含几个依赖jar）。 有关更多信息，请参阅。
全自动静态网页生成器StaticHtml
06-08
全自动静态网页生成器StaticHtml
henry:简单的静态 HTML 生成器
06-13
Henry - 静态 HTML 生成器 离网编码器的一部分 Lints、编译 Sass、缩小 CSS、JS 和图像/并从部分和模板构建 html 文件 如何开始 通过键入以下命令为您的项目创建一个新目录： git clone https://github.com/theWickedWebDev/henry.git <name> 这将创建一个包含您需要的所有文件的目录，以及一个非常基本的站点。 cd <name> <sudo> npm install gem install scss-lint 这个版本中已经有一些基本的东西。 一个索引页以及一个子目录“关于”。 小的 scss 更改和一个供应商库（规范化）。 这些是为了让您入门。 命令 gulp 这会将您的文件构建到一个 dist 文件夹中，然后监视更改。 当更改
今日学习之博文尚美首页
Pursuit53的博客
03-02 4919
博文尚美首页
简约优雅，这个开源项目让你用 Deno 部署一个静态网页
ZicoChan的博客
10-09 633
在今年 5 月份的时候，Deno 1.0 发布了。Deno 是作者Ryan Dahl 在 Node 之后的又一大作，它是一个新的运行时，用于在 Web 浏览器之外执行 JavaScript 和 TypeScript，其采用 Rust 编写而成（最初用的是 Golang）。 今天介绍的项目就是使用 Deno + React 驱动的静态网页生成器，那么它与我们更熟悉的 Hugo、Jekyll 等相比，有什么区别呢，一起来看看吧。 项目名称：Pagic 项目作者：xcatliu 开源许可协议：MIT .
html生成器_WordPress生成HTML静态化网站
weixin_39672680的博客
12-01 176
之前，我写过一个“WordPress的静态化方法”，使用的是一个名为cos-html-cache的插件实现。这个插件非常简洁小巧，直接在原网站上生成首页和文章页的html文件，不过，这个插件只支持文章静态化，不支持页面、标签和分类的静态化，之后也再没有过更新。后来，我想到过利用WordPress插件导出全静态化网站的方法，用这个方法，对于少量文章挺方便，但文章数量一旦多了，就经常出错。后来，我看到...
博文尚美相关源码，网页展示
qq_64131064的博客
07-31 503
代码】博文尚美相关源码，网页展示。
pc前端开发小经验
u013018357的博客
12-07 596
1.先把每个页面的shortcut设置好，还要title属性。 2.在写样式时候有数字的时候需要多考虑如果数字多几位那么样式是否会被改变。 3.$(".login-aside").css("background","url(../../img/login.png) no-repeat"); 这个url的地址是js相对图片的地址 4. 在html页面上<input type="hidden"
"高端时尚配饰行业人群洞察白皮书：消费者需求多元化深度刻画与运营策略
本白皮书由上海百秋尚美科技服务集团与天猫生态实验室、天猫品牌力研究所联合发布，旨在深入洞察高端时尚配饰行业消费者需求，通过对六大策略人群的定义和刻画，结合案例分析和运营方法，为该行业提供更为精准的营销...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值