WEB前端(4)—— CSS经典案例(DIV+CSS布局)

超实用的div+css布局

附加html和css代码：

<!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>CSS案例</title>
</head>
<style>* {margin: 0;padding: 0;list-style: none;text-decoration: none;}/* 动画 */@keyframes banner{0%{top:50px}50%{top: 220px;}100%{top: 50px;}}/* 公共标题 */.title{margin-top: 80px;}.title h3{font-size: 30px;color: #333;font-weight: 100;}.title p{font-size: 14px;color: #888;margin: 10px 0 25px;}.title b{display: block;width: 70px;height: 2px;background: #444;margin: 0 auto;}/* 头部区域 */.header {width: 1160px;height: 80px;margin: 0 auto;}.logo {float: left;margin-top: 10px;}.nav {float: left;margin-left: 80px;}.nav li{float: left;position:relative;}.nav li a {display: block;line-height: 80px;padding: 0 25px;font-size: 16px;color: #333;}.nav li:hover a{color: #009ee6;}.down{width: 150px;background: #333;border-top: 2px solid #009ee6;position: absolute;top: 80px;left: 0;display: none;}.down .list{height: 40px;line-height: 40px;}.list p{float: left;margin-left: 10px;color: #ccc;}.list .box{width: 10px;height: 10px;border-radius:50%;border: 2px solid #ccc;float: left;margin-top: 12px;margin-left: 5px;}.list:hover{background: #fff;}.list:hover .box{border-color: #009ee6;}.nav li:hover .down{display: block;}.tel {float: right;text-align: right;margin-top: 15px;}.tel p {font-size: 14px;color: #666;}.tel span {font-size: 22px;color: #333;}/* 海报区域 */.banner{width: 100%;height: 1270px;background:url(/image/1160.jpg) no-repeat center;position:relative;}.banner img{position: absolute;right: 10%;top: 10px;animation: banner 3s linear infinite;}/* 产品区域 */.pro{width: 1920px;height: 680px;margin: 0 auto;text-align: center;overflow: hidden;}.pro_con{width: 1160px;height: 350px;margin: auto;margin-top: 40px;}.pro_con li{width: 290px;height: 350px;position: relative;float: left;}.pro_con .black{width: 290px;height: 350px;background: rgba(0, 0, 0, 1);position: absolute;left: 0;top: 0;overflow: hidden;}.black img{margin-top: 95px;transition: 0.3s;}.black i{display: block;width: 20px;height: 2px;background: #fff;margin: 27px auto 20px;transition: 0.3s}.black h4{font-size: 22px;color: #fff;font-weight: 100;}.black p{padding: 0 10px;color: #fff;font-size: 14px;margin: 38px 0 40px;opacity: 0;transition: 0.3s}.black a{display: block;width: 98px;height: 28px;color: #fff;font-size: 14px;border: 1px solid #fff;margin:0 auto;opacity: 0;transition: 0.3s;line-height: 28px;}.pro_con li:hover .black{background: rgba(31, 133, 244, 0.5);}.pro_con li:hover .black img{margin-top: 45px;}.pro_con li:hover .black i{opacity: 0;margin-top: 0;}.pro_con li:hover .black p{opacity: 1;}.pro_con li:hover .black a{opacity: 1;}.btn{width: 130px;height: 32px;color: #009ee6;font-size: 14px;border: 1px solid #009ee6;display: block;text-align: center;line-height: 32px;margin: 30px auto 0;border-radius: 16px;}.btn:hover{background: #009ee6;color: #fff;}/* 底部区域 */.footer1{width: 1920px;height: 230px;background: #413e3e;margin: auto;}.ft_center{width: 1160px;height: 230px;border: 1px solid #fff;margin: 0 auto;}.ft_center h1{text-align: center;color: #fff;margin-top: 50px;}
</style><body><!-- 头部区域 --><div class="header"><a href="#" class="logo"><img src="data:image/Logo.jpg" alt=""></a><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><div class="down"><div class="list"><div class="box"></div><p>公司简历</p></div><div class="list"><div class="box"></div><p>公司简历</p></div></div></li><li><a href="#">解决方案</a></li><li><a href="#">成功案例</a></li><li><a href="#">新闻中心</a></li><li><a href="#">联系我们</a></li></ul><div class="tel"><p>全国统一电话:<br><span>123-456-789</span></p></div></div><!-- 海报区域 --><div class="banner"><img src="/image/002.jpg" alt=""></div><!-- 产品区域 --><div class="pro"><div class="title"><h3>《智慧校园》解决方案</h3><p>Solution Show</p><b></b></div><ul class="pro_con"><li><img src="/image/1.jpg" alt=""><div class="black"><img src="/image/Logo.jpg" alt=""><i></i><h4>智慧中心</h4><p>专注健康，关注校园，服务校园...</p><a href="#">了解详情</a></div></li><li><img src="/image/1.jpg" alt=""><div class="black"><img src="/image/Logo.jpg" alt=""><i></i><h4>智慧中心</h4><p>专注健康，关注校园，服务校园...</p><a href="#">了解详情</a></div></li><li><img src="/image/1.jpg" alt=""><div class="black"><img src="/image/Logo.jpg" alt=""><i></i><h4>智慧中心</h4><p>专注健康，关注校园，服务校园...</p><a href="#">了解详情</a></div></li><li><img src="/image/1.jpg" alt=""><div class="black"><img src="/image/Logo.jpg" alt=""><i></i><h4>智慧中心</h4><p>专注健康，关注校园，服务校园...</p><a href="#">了解详情</a></div></li></ul><a href="#" class="btn">查看更多</a></div><!-- 底部区域 --><div class="footer1"><div class="ft_center"><h1>底部展示</h1>></div></div><div class="footer2"></div>
</body></html>

运行效果图如下：

WEB前端(4)—— CSS经典案例(DIV+CSS布局)相关推荐

HTML5div css入门案例,div+css教学教案(学习入门到精通~)详细讲解.doc
| div+cssHYPERLINK "/"教程(入门到精通) 目录: 一.div+css教程(入门到精通)详细讲解二.DIV+CSS网页布局常用基础知识三.div+css常用 ...
web前端知识总结一（HTMl+CSS）
web前端知识总结一(HTML+CSS) 文章目录 web前端知识总结一(HTML+CSS) 浏览器 HTML基础换行标签水平线标签图片标签绝对路径相对路径视频标签链接标签锚点无序列 ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
转发：11个web前端开发实战项目案例+源码！拿走就是了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43793782/arti ...
使用div和css重构网站,DIV+CSS网页重构概念详解
本文和大家重点讨论一下DIV+CSS网页重构的概念,常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方 ...
html div添加天气,web前端入门到实战：纯CSS写一个动态太阳的天气图标
效果效果图如下实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构用两个嵌套的div容器,父容器来控制 ...
给 Web 前端开发人员推荐20款 CSS 编辑器
CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...
Web前端开发笔记——第三章 CSS语言第六节 CSS定位
目录一.定义二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素三.浮动定位 (一)左浮动和右浮动 (二)清除浮动四.层定位 (一)st ...
为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发？
从分析介绍来看,题主的主要工作内容是还是从事游戏方向的工作,前端里面的游戏开发大部分应用在canvas绘图里面,应用前端里面的html结构和css样式是比较低:那么咱们就需要从多角度考虑考虑为什么we ...

WEB前端(4)—— CSS经典案例(DIV+CSS布局)

超实用的div+css布局

WEB前端(4)—— CSS经典案例(DIV+CSS布局)相关推荐

最新文章

热门文章