html5+css3项目 (企业网站之集团活动)
来源:互联网 发布:tpo模考软件mac版 编辑:程序博客网 时间:2024/04/28 05:42
只是单纯的跟着视频做一个记录,顺便回顾一下基础
界面
1.界面分析:
最上面是一个标题也就是 集团活动然后是一个列表 活动展示 下面左边是列表 右边也是列表
2.代码解析:
①第一标题 设置class 名字 和之前的一样 css也会设置这里的标题
<div class="title_bg"> <h2><a href="list.html">集团活动</a></h2> </div>② 接下来是集团活动列表
<section id="huodong_a"> <ul> <li><a href="content.html"><img src="images/hd_1.jpg"> </a> </li><li> <a href="content.html"><img src="images/hd2.jpg"> </a> </li><li> <a href="content.html"><img src="images/hd3.jpg"> </a> </li><li> <a href="content.html"><img src="images/hd2.jpg"> </a> </li> </ul> </section>接下来就是设置成一行
css 代码:
/*集团活动展示图片列表CSS*/section#huodong_a{ /*设置间距*/ margin-top: 10px;}section#huodong_a li{ /*横向对其*/ display: inline-block; vertical-align: top; margin-right: 9px;}section#huodong_a li:last-child{ /*最后是没有间距的*/ margin-right: 0;}section#huodong_a li img{ /*即使图片变了布局也不会变*/ width: 150px; height: 150px;}
③集团新闻活动表示一个列表 同时还有滑动效果
html 代码:
<section id="huodong_b"> <ul> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> <li><a href="content.html">新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长新闻标题会很长很长很长</a></li> </ul> </section>
同时计算好宽高 列表去掉前面点 使用before 选择器自动加入计数器 进行 前三是蓝色后面全是黑色 同时列表100%宽度不换行,自动省 然后右边的因为要和上面的对其 使用间隔
section#huodong_b{ width: 469px; display:inline-block; margin-top:10px; vertical-align: top; margin-right: 9px;}section#huodong_b li:before{ content: counter(listxh); background: #444; padding: 2px 5px; color: #fff; margin-right: 5px;}section#huodong_b li{ counter-increment: listxh; display: inline-block; width: 100%; vertical-align: bottom; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 16px; -webkit-transition:text-shadow 1s linear; -moz-transition:text-shadow 1s linear; -ms-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; transition:text-shadow 1s linear;}section#huodong_b li:first-child:before,section#huodong_b li:nth-child(2):before,section#huodong_b li:nth-child(3):before{ background: #3598DC;}section#huodong_b li:last-child:before{ padding: 2px; font-size: 14px;}section#huodong_b a{ color: #444444; text-decoration: none;}section#huodong_b li:hover{ text-shadow: 1px 4px 4px #000;}section#huodong_c{ width: 150px; display:inline-block;}section#huodong_c li{ display:inline-block; vertical-align: top; margin-top:10px;}section#huodong_c li:first-child,section#huodong_c li:first-child img{ width:150px; height:205px;}section#huodong_c li:last-child,section#huodong_c li:last-child img{ width:150px; height:154px;}
End
点击下载源码
0 0
- html5+css3项目 (企业网站之集团活动)
- html5+css3项目 (企业网站之标题)
- html5+css3项目 (企业网站之侧边栏的编写)
- 集团企业网站群建设发展趋势
- java网站模版 Bootstrap HTML5 企业源码 项目源码
- HTML5+CSS3项目总结
- 简洁的HTML5和CSS3免费企业网站模板源码下载
- html5+css3实现抽奖活动的效果
- HTML5+CSS3的应用之(一)
- HTML5之HTML+CSS3代码(一)
- HTML5之HTML+CSS3代码(二)
- 生日快乐网站模板(个人制作)(HTML5+CSS3+JS)
- 企业网站项目
- 易普森企业网站项目
- FURNICO企业网站项目
- 2016超实用HTML5+CSS3移动web开发、手机网站源码(Mobile Web App微商城)、webApp企业微站
- 集团信息化之路 集团正式启动ERP项目
- 婚礼策划企业CSS3网站模板
- HttpClient使用HttpGet进行json数据传输
- 让IE6 ~IE11支持Bootstrap的解决方法
- c++实现两个大整数相加(一)
- Delphi XE7,C++ Builder XE7,RAD Studio XE7 v21.0.17017.3725(With Update 1) 官方下载激活
- lintcode-子数组之和-138
- html5+css3项目 (企业网站之集团活动)
- document.body 和 document.documentElement 的属性区别
- vsPhere,vCenter,ExiHost关系
- windows下安装python和Django
- Gibbs Sampling(一):随机数产生方法介绍 & Monte Carlo方法
- gettimeofday
- 关于快速排序的深入分析
- 获取iPhone通话记录(需越狱)
- Objective-C 中的字面量语法