html+css网页布局积累

最新推荐文章于 2024-06-25 10:52:00 发布

Codingwithlife

最新推荐文章于 2024-06-25 10:52:00 发布

阅读量788

点赞数

分类专栏： html+css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44164982/article/details/107400345

版权

html+css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、taobao.com

1.以图换字实现网页logo（以淘宝网为例）

3.小米广告图标(实现图中框线效果，鼠标悬停透明度从0.7变为1）

三、媒体查询

一、taobao.com

0.<link rel="icon" href="favicon.ico">

1.以图换字实现网页logo（以淘宝网为例）

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		h1 a{
			display: block;
			width:143px;
			height:59px;
			background: url(logo.png) center no-repeat;/*图片作为背景图片*/
			text-indent: -9999px;/*设置文本缩进让文字消失*/
			overflow: hidden;/*超出隐藏*/
		}
	</style>
</head>
<body>
<h1><a href="">淘宝网</a></h1>
</body>
</html>

效果：

2.标题栏小图标与文字间设置间距

文本之间默认空隙存在时：

文本间空隙去除后：

重新设置箭头到左边内容间距后：

这里因为这个默认空隙与文字大小有关，我就设li的font-size：0；之后再给a、span设置字体大小。这个默认间隙，我们去做的时候一定要及时去除。

/*文本之间默认空隙与font-size有关，将父元素font-size设为0，重新设置箭头span.arrow到左边距离*/
#headMessage li{
	float:left;
	line-height: 35px;
	padding: 0 6px;
	font-size:0;
}

#headMessage li span.arrow{
	margin-left: 7px; /*重新设置箭头到左边距离*/
}

3.淘宝搜索栏

（1）左边部分的以图换字（fl）（前面讲过了）

（2）右边二维码部分（fr）

/html结构
<div class="code fr">
		<span class="iconfont close">&#xe614;</span>
		<span class="c5">手机淘宝</span>
		<img src="images/code.png" alt="">
</div>

//css样式
#headSearch .code{
	width: 72px;
	height: 86px;
	border: 1px solid #eee;
	position: relative;     //父盒子相对定位，X号图标绝对定位
	margin-right: 110px;
	text-align: center;
}
#headSearch .code img{      //设置二维码图片大小
	width: 62px;
	height: 62px;
}
#headSearch .close{        //关闭图标绝对定位
	position: absolute;
	left: -16px;
	top: -1px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	font-size: 14px;
	border: 1px solid #eee;
	color: #ddd;
	cursor: pointer;
}

（3）中间搜索框（margin：auto）

分为三部分（上中下）

上面：

<ul class="searchTab clearfix">
   <li class="active">宝贝</li>
   <li>天猫</li>
   <li>店铺</li>
</ul>

中间：

<div class="searchContent clearfix">
	<form action="#">
		<div class="searchBox fl">
		      <input type="text">
			  <div class="placeholder">
					<i class="iconfont">&#xe615;</i>
					<span>网红裤腰带 洋气 国际范 9.9包邮</span>
			  </div>
			  <span class="iconfont imgSearch">&#xe6ba;</span>
		</div>
		<div class="btn fl">
		   <button type="submit">搜索</button>
	    </div>
	</form>
</div>

下面候选词：

<div class="hotKey">
					<a href="#" class="c5">积木</a>
					<a href="#">网线</a>
					<a href="#" class="c5">爬行垫</a>
					<a href="#">时尚连衣裙</a>
					<a href="#">男士T恤</a>
					<a href="#" class="c5">时尚休闲裤</a>
					<a href="#">粽子</a>
					<a href="#">沙发</a>
					<a href="#">风扇</a>
					<a href="#">定制窗帘</a>
					<a href="#">男士内裤</a>
					<a href="#">凉席三件套</a>
					<a href="#">办公桌</a>
</div>

4.导航栏

<div id="nav" class="layer clearfix">
		<h2 class="fl">主题市场</h2>
		<ul>
			<li class="size"><a href="#">天猫</a></li>
			<li class="size"><a href="#">聚划算</a></li>
			<li class="size"><a href="#">天猫超市</a></li>
			<li class="line">|</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>
			<li class="line">|</li>
			<li><a href="#">飞猪旅行</a></li>
			<li><a href="#">智能生活</a></li>
			<li><a href="#">苏宁易购</a></li>
		</ul>
	</div>

这里使用li标签，li标签有一个鼠标悬停时的效果：

我们用伪类和背景属性实现：

#nav ul li:hover:before{
	content: '';
	position: absolute;
	width: 23px;
	height: 13px;
	background-image: url(../images/ico_01.gif);
	top: -13px;
	left: 50%;
	margin-left: -12px;
}

5.渐变按钮制作

  .btn button{
  	width: 75px;
  	height: 25px;
  	color:#fff;
  	margin: 12px 2px 0 2px;
	color: #fff;
	font-weight: bold;
  	line-height: 25px;
  	background-image: linear-gradient(to right, #ff5000 ,#ff6000);
  	border:none;
  	border-radius: 4px;
  }

<div class="btn">
	<button class="login">登录</button>
	<button class="register">注册</button>
	<button class="shop">开店</button>
</div>

6.新闻句子

7.图标

/* 图标区域 */
.firstRight .icon{
	width: 100%;
	height: 231px;
	background-color: #fff;
	table-layout: fixed;	/* 定义列宽的算法，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度 */
}
.firstRight .icon td{
	border: 1px solid #f4f4f4;
	text-align: center;
}
.firstRight .icon td span{
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
	background: url(../images/ico.png) no-repeat;
}
.firstRight .icon td i{
	line-height: 34px;
	color: #333;
}
.firstRight .icon .item1 span{  //使用精灵图
	background-position: 0 0; 
}

二、mi.com

1.头部菜单栏

<div id="headMessage">------设置通栏背景
     <div> ------设置菜单栏居中   
          <div class="top1">----------左边菜单栏float：left
              <a href="">标题</a>
              <span class="line">|</span>------方便设置垂直分割线样式
                   左边n个标题
           </div>
          <div class="top2">---------右边菜单栏float：right
              <a href="">标题</a>
              <span class="line">|</span>
                   右边标题
            <!--注意细节，购物车处与其他样式略有差异>
               <div class="cart">------------购物车div单独设置背景颜色
	            <span class="iconfont shop" >&#xf0179;</span>
	            <span>购物车(0)</span> 
            </div>
       </div>
</div>
    
/*购物车样式设置*/
#headMessage .cart{
float: right;
width: 120px;
height: 40px;
margin-left: 15px;
line-height: 40px;
text-align: center;
color: #b0b0b0;
background: #424242;
}

2.logo点击图标切换

使用定位和translate实现：

 
<div class="logo">
				<img class="logo1" src="images/header_1.png"> -------mi logo
				<img class="logo2" src="images/header_2.png"> -------首页logo
 </div>

css样式：
 .logo{
	position: relative;
	margin-top: 22px;
	overflow: hidden;----内容超出盒子大小则隐藏
	width:55px;
	height: 55px;
	background-color: #ff6700;
}
.logo .logo2{
	position: absolute;
	top:0;
	left:-50px;
}
 .logo:hover  .logo2{
	transform: translateX(50px);
	transition: .1s;
}
 .logo:hover  .logo1{
	transform: translateX(50px);
	transition: .1s;
}

3.小米广告图标(实现图中框线效果，鼠标悬停透明度从0.7变为1）

这里我还是用的ul和li，给li相对定位，然后给两个伪类设置绝对定位。

 <!-- html结构 -- >
<ul class="adList">
     	<li>
			<a href=""><img src="images/menu1.png"></a>
			<p>小米秒杀</p>
		<li>
			<a href=""><img src="images/menu2.png"></a>
			<p>企业团购</p>
		<li>
			<a href=""><img src="images/menu3.png"></a>
			<p>F码通道</p>
		<li>
			<a href=""><img src="images/menu4.png"></a>
			<p>米粉卡</p>
		<li>
			<a href=""><img src="images/menu5.png"></a>
			<p>以旧换新</p>
		<li>
			<a href=""><img src="images/menu6.png"></a>
			<p>话费充值</p>
		</li>
     </ul>

/*css样式*/

ul{float:left;margin-top: 17px;width:236px;height: 170px;font-size: 12px;text-align:center;background-color: #5f5750;}
ul li{position: relative;float:left;width: 70px;height: 82px;padding: 0 3px;cursor:pointer;}
ul li:before{content: " "; position:absolute;top:8px; display:block; width: 1px; height: 70px;background-color: #665e57;}
ul li:after{content: " "; position:absolute;top:0px;left:11px;display:block; width: 60px; height: 1px;background-color: #665e57;}
ul li a{ display: block; padding-top: 18px; text-overflow: ellipsis; color: red; opacity: .7; transition: opacity .2s;}
ul li p{ color: #fff;opacity: .7;transition: opacity .2s;}
ul li img{ width: 24px;height: 24px; }
ul li:hover p{ opacity: 1;}
ul li:hover a{opacity: 1;}

三、媒体查询

步骤：
1）设置meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maxium-scale=1.0,user-scaleable=no">

说明：
以上标签的内容只能被移动设备识别。
viewport：视口（移动端）。
width=device-width：宽度等于当前设备的宽度。
initial-scale=1.0：初始缩放比例（默认为1.0）
minimum-scale=1.0：允许用户缩放到的最小比例（默认为1.0）
maximum-scale=1.0：允许用户缩放到的最大比例（默认为1.0）
user-scaleable=no：用户是否可以手动缩放（默认为no）
2）设置IE渲染方式默认为最高版本
<meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1">

说明：
以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE
的最高版本渲染页面。
3）引入兼容的JS文件

说明：
因为IE8及IE8以下版本既不支持html5，也不支持CSS3 Media，所以我们需要加载JS文件来处理这个兼容。
上面的代码是一个注释语句，也就是说，IE9及以上的版本不会编译这几行代码。
4）进入CSS3提供的媒体查询
a）引入外部CSS文件时使用
<link rel="stylesheet" href="css/screen480.css" media="screen and (max-width:480px)" >
如果屏宽为480px及以下，将加载screen480.css文件。
<link rel="stylesheet" href="css/screen800.css" media="screen and (min-width:480px) and (max-width:800px)" >
如果屏宽为480px以上且在800px以下，将加载screen800.css文件。
<link rel="stylesheet" href="css/screengt800.css" media="screen and (min-width:800px)" >
如果屏宽为800px以上，将加载screengt800.css文件。

设备：
all:所有设备
screen:PC端显示器
print:打印机或打印预览图
handheld:便携设备
tv:电视
speech:音频合成器
braille:盲人点触设备
embossed:盲人打印机
projection:投影设备
tty:固定密度字母栅格设备

only:用来排除不支持媒体查询的浏览器