扁平化设计，博客网站（五）

最新推荐文章于 2021-07-16 16:32:59 发布

敢跟头像对视三秒吗？

最新推荐文章于 2021-07-16 16:32:59 发布

阅读量158

点赞数

分类专栏： web开发练习

本文链接：https://blog.csdn.net/weixin_45769564/article/details/118416812

版权

web开发练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

好久没有更新博客网站的进度了，今天更新的有点多

当你的网站框架确定之后，并且基本上搭建出来，那我认为接下开要开始考虑的问题有以下几个
网页的自适应移动端的兼容性问题
网页的基本颜色风格设计和素材处理技巧
中间主要内容部分的总体规划
尾部版权部分字体处理和位置结构处理
我们一个一个来
网页的自适应移动端的兼容性问题
这个问题的解决主要需要你对viewport，绝对定位以及media比较熟悉
viewport特性：一个移动专属的Meta值，用于定义视口的各种行为。
该特性最先由Apple引入，用于解决移动端的页面展示问题，后续被越来越多的厂商跟进。
举个简单的例子来讲为什么会需要它：我们知道用户大规模使用手机等移动设备来进行网页浏览器，其实得益于智能手持设备的兴起，也就是近几年的事。（还记得不久前的几年，满大街都还是诺基亚的天下么？）
这时有一个很现实的问题摆在了厂商面前，用户并不能很好地通过手机等设备访问网页，因为屏幕太小。

绝对定位我们之前已经介绍过很多次了，他需要配合这相对定位来使用，并且在css的position属性中，相对定位与绝对定位是与其他属性独立的，在使用其他属性是我们为了调整网页结构则需要其他的方法配合使用，这个在下下篇博客调整网页结构时我们会介绍到

media就比较熟悉了，他基本可以看作是我们处理移动端兼容性问题的主要解决方案，就是说他是必不可少的，具体的格式我们在之前也介绍过，在下面我会用代码的方式展示出来

pc端网页效果
网页的基本颜色风格设计和素材处理技巧
首先就是使用ppt来美化和抠图，很多人都使用ps来做，但其实ppt也可以做到
在菜单栏选择格式在选择格式中的删除背景，效率对比ps只高不低哦

在这里插入图片描述
第二个要介绍的就是一些高级色调的调节
我使用的式谷歌浏览器的颜色调节器，因为它足够简单个直接，在你选择你想要的贪色它可以直接生成名称，直接复制粘贴就可以使用，同时使用hls方式配色，颜色值0-360之间，饱和度0-100%,亮度0-100%的这种方式相互搭配效果更好
移动端网页效果
中间主要内容部分的总体规划
这个不同的需求不同那做出来的样式也不一样，基本要求就是符合h5网页开发基本特征
看代码就完四了
尾部版权部分字体处理和位置结构处理

<footer>
		<section>&copy;2021 | 香江小海涛</section>
</footer>

代码部分

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>香江小海涛</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/mian.css" />
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="wrapper">
			<header>
				<h1>香江小汉堡<br><span class="logo">x i a n g j i a n g</span></h1>
			</header>
			<nav>
				<ul>
					<li class="item_active"><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>
					<button type="button"></button>

				</ul>

			</nav>
			<div id="container">


				<div class="ad">
					<img src="img/guangbo.png">
					<marquee behavior="" direction="">欢迎来到香江小汉堡美食网站 今天起的有点早 / 闲着没事做个汉堡 / 汉堡味道好不好 / 配料你得要选好 / 面包片 老干妈 / 放点生菜合上它 / 大白豆腐 韭菜花 / 今天早餐就吃它 / 灯红酒绿迷人醉 / 老八教你做美味 / 千军万马来相见 / 首先来碗大桶面 / 大声呐喊奥利给 / 所有东西都下胃 / 不管是腥还是臭 / 到我嘴里是块肉 奥里给 干了兄弟们!!!!</marquee>
				</div>
				<div class="content">
					<section>
						<div id="pics" class="pics">
							<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E8%80%81%E5%85%AB&hs=0&pn=1&spn=0&di=151360&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2516937770%2C245388711&os=1453583172%2C743231865&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E8%80%81%E5%85%AB&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F4c64d7a9ef8670086f0474493a3ab42aaf0dc9f6.jpg%26refer%3Dhttp%3A%2F%2Fi0.hdslb.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1627603955%26t%3Dd449c683195eb3cf63b840b1da2b2ec9&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bktstktst_z%26e3Bv54AzdH3F6jw1AzdH3Fve90989ma&gsm=2&islist=&querylist=">
								<img src="upload/pics/a1.jpeg"alt="Grapefruit slice atop a pile of other slices">
							</a>
						</div>
						<div class="weekrank">
							周排行
						</div>

					</section>
					<aside>
						侧标看
					</aside>
				</div>


			</div>
			<footer>
				<section>&copy;2021 | 香江小海涛</section>
			</footer>
		</div>
	</body>
</html>
<a href="#">

css

* {
	margin: 0;
	padding: 0;
	color: #696969;
}

#wrapper {
	background-color: #CCCCCC;
}

#wrapper>header {
	background-color: hsl(215, 100%, 55%);
	width: 100%;
	height: 150px;

	display: -webkit-box;
	display: -moz-box;
	/* -moz-box-pack: center;
	-webkit-box-pack: center; */
	position: relative;
}

#wrapper>header .logo {
	font-family: "db";
	color: white;
	font-size: 20px;
}

#wrapper>header>h1 {
	color: white;
	/* 
	 */
	margin: auto;
	display: -webkit-box;
	display: -moz-box;
	-moz-box-align: center;
	-webkit-box-align: center;
	transition-duration: 3s;
	cursor: pointer;

	text-shadow: purple 5px 3px 1px;

}

#wrapper>header>h1:hover {
	left: 10px;
	transform: translateX(50px);

	text-shadow: blueviolet 14px 7px 10px;



}

/* 导航栏 */
#wrapper>nav {

	background-color: dimgrey;
	height: 65px;
	/*在手机情况下可以华东*/

}

@media (max-width:600px) {
	#wrapper>nav {

		overflow: scroll;

	}
}

#wrapper>nav ul {
	/* border: 1px solid forestgreen;
	max-width: 960px;
	margin: auto;
	/* display: inline-block; */

	/* height: 65px; */
	position: relative;
	min-width: 600px;

}

#wrapper>nav li {
	display: inline-block;
	height: 45px;
	line-height: 45px;
	padding: 10px;
	max-width: 80px;
	/* border: 1px solid forestgreen; */
	text-align: center;


}

#wrapper>nav li:hover,
.item_active {
	background-color: cadetblue;
	text-shadow: brown 2px 2px 5px;
}

#wrapper>nav>ul a {
	color: white;
	text-decoration: none;
	font-size: 20px;





}

/* 查找按钮 */
#wrapper>nav>ul button {

	border-width: 0;
	background-color: transparent;
	position: absolute;
	/* padding-top: 20px; */
	background-image: url(../img/lookup3.png);
	width: 32px;
	height: 32px;
	top: 17px;
	cursor: pointer;
}

#wrapper>nav>ul button:hover {
	/* background-color: #8A2BE2; */
	background-image: url(../img/lookup4.png);
}


/* 开始正文模块 */

#wrapper>#container {
	max-width: 960px;
	/* background-color: #ccc; */
	margin: auto;
	/* border: 1px solid forestgreen; */
	position: relative;
	overflow: auto;
}

/* 广告栏 */
#wrapper>#container>.ad {
	background-color: #FFFFFF;
	box-shadow: gray 3px 3px 10px;
	padding: 5px;
	position: relative;

}

/* #wrapper>nav button>img{
	width: 30px;
	height: 30px;
	/* padding-top: 5px; */


#wrapper>#container>.ad img {
	margin-right: 10px;
	/* margin-top: 3px; */
	position: absolute;
	margin-top: 5px;
}

#wrapper>#container>.ad>marquee {
	max-width: 900px;
	margin-left: 20px;
}

/* 主要内容部分 */
#wrapper>#container>section {
	width: 655px;
	height: 400px;
	border: 1px solid red;
	float: left;

}

#wrapper>#container>aside {
	width: 300px;
	height: 400px;
	border: 1px solid blue;
	float: right;
}

/* #wrapper>nav>a{
	text-decoration: none;
	color: white;
	font-size: 30px;
	margin: auto;
	text-align: center;
	padding: 10px;
	
}
#wrapper>nav>a:hover{
	text-shadow: brown 2px 2px 5px;
	background-color:hsl(225,100%,55%);
} */
/* 版权模块 */
#wrapper>footer {


	background-color: #595959;
	width: 100%;
	color: white;
	height: 50px;


}

#wrapper>footer>section {
	color: white;
	margin: auto;
	max-width: 960px;
	line-height: 50px;

}

敢跟头像对视三秒吗？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
扁平化设计，博客网站（五）

好久没有更新博客网站的进度了，今天更新的有点多当你的网站框架确定之后，并且基本上搭建出来，那我认为接下开要开始考虑的问题有以下几个网页的自适应移动端的兼容性问题网页的基本颜色风格设计和素材处理技巧中间主要内容部分的总体规划尾部版权部分字体处理和位置结构处理我们一个一个来网页的自适应移动端的兼容性问题这个问题的解决主要需要你对viewport，绝对定位以及media比较熟悉viewport特性：一个移动专属的Meta值，用于定义视口的各种行为。该特性最先由Apple引入，用于解决移动端
复制链接

扫一扫