HTML+CSS简单静态页面—

对于一个很简单的页面的记录

代码记录

效果图
HTML代码展示
CSS代码展示

效果图

HTML代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="test.css"><!-- 版心，通栏 -->
</head>
<body><div class="header con"><div class="logo"></div><div class="headerright"><ul><li><a class = "active" href="">安利海外购</a></li><li><a href="">掌上安利</a></li><li><a class = "active" href="">安利月享荟</a></li><li><a href="">安利植物研发中心</a></li><li><a href="">各地店铺</a></li><li><a class = "last active" href="">安利易联网</a></li></ul><div class="search"><input type="text" name="" placeholder="搜索" class="left"><input type="submit" name="" value="" class="right"></div></div></div><div class="nav"><ul class="con"><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 class="banner"></div><div class="list con"><div class="box1"><img src="../image_box/anlilist.png" alt=""><p>《总裁零距离微站》</p></div><div class="box1"><img src="../image_box/anlilist1.png" alt=""><p>安利，值得选择</p></div><div class="box1 last"><img src="../image_box/anlilist2.png" alt=""><p>安利式体验 全新为您</p></div></div><div class="footer"><div class="con"><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><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><p>版权为安利（中国)日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号</p></div></div>
</body>
</html>

CSS代码展示

*{margin: 0;padding: 0;
}
a{text-decoration: none;
}
/*header区域*/
ul{list-style: none;
}
.con{width: 970px;margin: 0 auto;
}
.header{height: 110px;/*background-color: yellow;*/
}
.logo{width: 263px;height: 110px;background: url(../image_box/anlilogo.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;
}
.search .left{float: left;width: 196px;height: 28px;padding-left: 14px;
}
.search .right{background: url(../image_box/search.png) no-repeat center center; float: right;height: 28px;width: 24px;
}
/*nav区域*/
.nav {height: 53px;line-height: 53px;border: 1px solid #657588;background: #0c345c;
}
.nav a{color: white;
}
.nav li{float: left;font-size: 16px;margin-right: 76px;
}
/*banner区域*/
.banner{height: 380px;background: url(../image_box/anlinav.png)no-repeat center;
}
/*list区域*/
.list{height: 213px;margin-top: 50px;margin-bottom: 35px;/*background: yellow;*/
}
.list .box1{width: 305px;height: 211px;border: 1px solid #cccccc;float: left;margin-right: 18px;
}
.list .last{margin-right: 0;
}
.list .box1 p{height: 47px;line-height: 47px;padding-left: 28px;font-size: 16px; color: black;
}
.box1 img{display: block;
}
/*footer区域*/
.footer{height: 206px;border-top: 1px solid #cccccc;background: url(../image_box/anlifooter.png);
}
.footer ul a{display: block;color: rgb(0, 0, 120);
}
.footer ul{height: 84px;padding-top: 30px;padding-bottom: 30px;border: 1px solid #ecebeb;line-height: 28px;
}
.footer li{padding-left: 30px;width: 210px;font-size: 12px;  color: #336699;float: left;
}
.footer p{padding-left: 30px; height: 61px;line-height: 61px;font-size: 12px;
}
.footer span{color: #0096da
}

革命尚未成功，同志还需努力啊

HTML+CSS简单静态页面——安利首页相关推荐

CSS/HTML简单静态页面
****使用CSS/HTML创建一个简单的页面**** 效果图页面效果,尺寸为题分为两张图学习了CSS以及HTML基础知识使用的是一些很基础的知识,画出了框架. 有一些简单的页面功能: 连接的ho ...
HTML简单静态页面的编写
文章目录前言一.头部标签的编写 1.顶部的前半部分 2.顶部的后半部分二.中间标签的编写 1.中间部分二.底部标签的编写 1.底部前半部分 2.底部后半部分总结前言接下来的内容是,利用H ...
Day210.服务端渲染技术NUXT、整合前台主页面、名师、课程静态页面、首页整合banner数据后端部分【创建banner微服务、接口、banner后台前端实现】 -谷粒学院
谷粒学院服务端渲染技术NUXT 一.服务端渲染技术NUXT 1.什么是服务端渲染服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获 ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
【学习笔记】HTML+CSS模仿静态淘宝首页
一.先上一张成果图二.已上传Github https://github.com/ImDaret/Front-end-learning 三.直接上代码(头大预警) HTML: <!DOCTYPE ...
【HTML、CSS】利用HTML、CSS实现静态页面——学成在线
学成在线头部精品推荐模块侧边导航&&编程入门模块数据分析师模块机器学习工程师&&前端开发工程师模块页面底部模块代码地址:GitHub - wmc145956 ...
基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品...
基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...

HTML+CSS简单静态页面——安利首页

代码记录

效果图

HTML代码展示

CSS代码展示

HTML+CSS简单静态页面——安利首页相关推荐

最新文章

热门文章