html+css 安利案例

运行效果为：

案例中html的代码为：

案例代码的css代码为：

运行效果为：

案例中html的代码为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>安利首页</title><link rel="stylesheet" href="./css/index.css"><!-- 版心 --><!-- 沾满全屏叫  通栏 -->
</head>
<body><!-- header 头部 --><div class="header con"><div class="logo"></div><div class="headerright"><ul><li><a class="active">安利海外购</a></li><li><a >掌上安利</a></li><li><a class="active">安利悦享荟</a></li><li><a >安利植物研发中心</a></li><li><a >各地店铺</a></li><li><a class="last active">安利易联网</a></li></ul><div class="search"><input type="text" placeholder="搜索" class="left"><input type="submit" value="" class="right"></div></div></div><!-- nav 导航栏 --><div class="nav"><ul class="con"><li>走近安利 </li><li>产品展馆 </li><li>公司资讯</li><li>企业责任</li><li>安利云购 </li><li>其他</li></ul></div><div class="banner"></div><div class="list con"><div class="item"><img src="img/item.png" alt=""><p>《总裁零距离》微站</p></div><div class="item"><img src="img/item.png" alt=""><p>《总裁零距离》微站</p></div><div class="item itemlost"><img src="img/item.png" alt=""><p>《总裁零距离》微站</p></div></div><div class="footer"><div class="con"><ul><li>安利公益基金会</li><li>安利云购</li><li>安利培训中心</li><li>安利轻创业平台</li><li>安利教育网</li><li>网站导航安利</li><li>全球官方网站</li><li>安利公益基金会</li><li>安利云购</li><li>安利培训中心</li><li>安利轻创业平台</li><li>安利教育网</li></ul><p>版权为安利（中国）日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号</p></div></div>
</body>
</html>

案例代码的css代码为：

*{margin: 0;padding: 0;
}
ul{list-style: none;
}
.con{width: 966px;margin: 0 auto;}
.header{/* background: yellow; */height: 110px;
}
.logo{width: 265px;height: 110px;background: url(../img/logo.png);float: left;
}
.headerright{float: right;
}
.headerright ul{height: 44px;margin-top: 10px;line-height: 44px;
}
.headerright li{float: left;
}
.headerright li a{border-right: 1px solid #b2c7ea;padding: 0 13px;font-size: 13px;color: #ababab;
}
.headerright .last{padding-right: 0;border: 0;
}
.headerright li .active{color: #eb6ca1;
}
.search{float:right;width: 234px;height: 28px;border: 1px solid #d1d1d1;
}
.search input{border: 0;/* outline: none; 外面的一圈线 设置为没有 */outline: none;
}
.search .left{width: 196px;float: left;height: 28px;padding-left: 14px;
}
.search .right{float: right;width: 24px;height: 28px;background: url(../img/search.png) no-repeat left center;}/* 导航栏 */.nav{height: 53px;line-height: 53px;border-top: 1px solid #657588;background: #0c345c;color: white;
}
.nav li{float: left;font-size: 16px;padding-right: 76px;
}.banner{height: 379px;background: url(../img/bg.png) no-repeat center;
}
.list{height: 213px;/* background: yellow; */margin-top: 51px;margin-bottom: 35px;
}
.item{height: 211px;width: 305px;border: 1px solid #ccc;float: left;margin-right: 19px;
}
.item img{display: block;
}
.item p{height: 47px;line-height: 47px;padding-left: 28px;font-size: 16px;color: black;
}
.itemlost{margin-right: 0;
}
.footer{height: 206px;border-top: 1px solid #ccc;background: url(../img/footer.png) ;
}
.footer ul{height: 84px;padding-top: 30px;padding-bottom: 30px;border-bottom: 1px solid #ecebeb;line-height: 28px;
}
.footer ul li{width: 210px;padding-left: 30px;font-size: 12px;color: #336699;float: left;
}
.footer p{height: 61px;line-height: 61px;padding-left: 30px;font-size: 12px;
}
.footer p span{color: #0096ba;
}

html+css 安利案例相关推荐

Css Secret 案例Demo全套
Css Secret 案例全套 github地址案例地址去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...
CSS实验案例02简单专业介绍网页
文章目录 CSS实验案例02简单专业介绍网页 2.1CSS 2.2HTML CSS实验案例02简单专业介绍网页 2.1CSS body {/* 主体*/font-size: 24px;text-ali ...
经典网页设计：30个创意的 CSS 应用案例
2012年涌现出众多令人印象深刻的 CSS 网站作品,这些网站充分应用 CSS 的强大特性实现各种绚丽的视觉效果.我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表,如果你有收藏更好的 ...
web前端之CSS样式案例--博雅网页
前言 CSS已经学了一些基础内容了,我们来讲解一个小案例吧.以博雅互动的官网首页举例. 版心首页的版心如下: 这里我们要普及一个概念,叫"版心".版心是页面中主要内容所在的区域. ...
04 CSS样式案例
1 选择器 1.1 标签选择器 p {color:red; font-size: 25px;} 1.2 类选择器 /* 类选择器 */ .red {color: red; width: 50px; ...
HTML+CSS练习案例
系列文章目录前端基础学习入门之html+css的使用文章目录系列文章目录前言一.移动端页面? 二.具体代码 1.index.html 2.index.css 3.normalize.css ...
千锋逆战班，css注册案例
千锋学习的第四十八天, 不积跬步无以至千里,不积小流无以成江河: 注册案例代码: <!DOCTYPE html> <html><head><meta char ...
HTML+CSS项目案例
文章目录 1.表格练习 2.文本样式练习 3.图片标签练习 4.盒子模型练习一 5.盒子模型练习二 6.盒子模型练习三 7.浮动练习 8.边框练习一 9.边框练习二 10.图文混排 11.列表练习 1 ...
html最美观的卡片列表,信息列表效果：卡片、列表切换（HTML+CSS+JS案例）
涉及知识点:HTML+CSS+JS DOM 案例效果: 列表模式-卡片模式互换.gif 案例源码: *{margin:0px;padding: 0px;} body{font: "微软雅黑& ...

html+css 安利案例

运行效果为：

案例中html的代码为：

案例代码的css代码为：

html+css 安利案例相关推荐

最新文章

热门文章