文档章节

3.25企业实训

 尼古拉斯琨
发布于 2019/03/26 21:48
字数 732
阅读 0
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

左侧列表的实现

“活力地带”这块的div,包含标题<h5>、图片<img />、列表标签<ul><li></li></ul>

h1~h6标题,h1最大

<div id="huoli">

         <h5>活力地带</h5>

         <ul>

                    <li><img src="images/1.gif" alt="修饰小图标" /><a href="#">个人首页</a></li>

                    <li><img src="images/2.gif" alt="修饰小图标" /><a href="#">校园情缘</a></li>

                    <li><img src="images/3.gif" alt="修饰小图标" /><a href="#">阳光生活</a></li>

                    <li><img src="images/4.gif" alt="修饰小图标" /><a href="#">释放梦想</a></li>

                    <li><img src="images/5.gif" alt="修饰小图标" /><a href="#">我的相册</a></li>

                    <li><img src="images/6.gif" alt="修饰小图标" /><a href="#">给我留言</a></li>

          </ul>

</div>

“文章分类、文章列表”放在一块div了,包含标题<h5>、列表标签<ul><li></li></ul>

当点击文章分类或者文章名称时,会有跳转这样一个操作,所以用<a>超链接

<div id="list">

   <h5>我的文章分类</h5>

   <ul>

      <li><a href="#">个人随笔</a></li>

      <li><a href="#">Web基础</a></li>

      <li><a href="#">Java基础</a></li>

      <li><a href="#">Servlet开发</a></li>

      <li><a href="#">Spring框架</a></li>

   </ul>

<h5>最新文章列表</h5>

   <ul>

      <li><a href="#">我的家在哪里</a></li>

      <li><a href="#">你好!秋天</a></li>

      <li><a href="#">web基础之HTML</a></li>

      <li><a href="#">大学生软件设计大赛</a></li>

   </ul>

</div>

“活力地带”这个标题和其他俩标题样式一样,那怎么设置css?Class选择器

#huoli{

    height:150px;

    margin-top:20px;    }

.biaoti{

    color:#FFFFFF;

    font-size:16px;

    font-weight:bolder; /*加粗*/

    width:220px;

    height:40px;

    background-color:#328048;

    border-radius:0 10px 10px 0; /*只设置右边的圆角 顺序:上 右  下 左*/

    padding-left:30px;

    line-height:40px;

   }

“活力地带”列表和菜单导航里的一样,设置为浮动,就会排排坐,一个个从左到右,因为一行只要2个,所以宽度有限制以后,放置2个li后就自动掉第2行去了

#huoli ul{

    padding-left:20px;

    padding-top:10px;

    list-style:none;     /*去掉点*/

}

#huoli ul li{

    float:left;     /*因为空间不够宽,仅能放下2个li*/

    width:80px;

    margin:5px;

}

#huoli ul li a{

    float:left;

    font-size:12px;

    color:#333333;

    text-decoration:none;

}

#huoli ul li img{     /*为了和文字保持队形,也浮动*/

    float:left;

    margin-right:6px;

}

“文章分类、文章列表”标题样式和活力地带用一个class

列表样式:li标签:用背景更容易设置列表的图标样式

background-position:5px center;背景图片左上角相对于li元素左上角位置 x轴 y轴

#list ul{

    list-style:none;

    padding:15px;

}

#list ul li{

    border-bottom:1px dashed #666;

    padding-bottom:8px;

    padding-left:15px;

    background:url(images/icon1.gif) no-repeat;/*背景图片左上角相对于li元素左上角的位置 x轴 y轴*/   

    background-position:5px center;

    margin-bottom:8px;

}

#list ul li a{

    font-size:12px;

    color:#333;

    text-decoration:none;

}

上一篇: 4.1企业实训
下一篇: 3.18企业实训
粉丝 0
博文 5
码字总数 3787
作品 0
潍坊
私信 提问
加载中
请先登录后再评论。
建站引擎--PHPMyWind

PHPMyWind 是基于PHP+MySQL开发符合W3C标准的建站引擎。它将带给人们一系列高效的,成熟的企业网站建设解决方案,让您的信息以更健康的形式高速传递给需要的它的人们,同时让您感受通过PHPMy...

匿名
2013/01/14
4.4K
1
Java 应用服务器--WildFly

WildFly,原名 JBoss AS(JBoss Application Server) 或者 JBoss,是一套应用程序服务器,属于开源的企业级 Java 中间件软件,用于实现基于 SOA 架构的 Web 应用和服务。 WildFly 包含一组可独...

匿名
2013/04/22
2.1W
1
跨平台开源通讯组件elastic communication

    elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net下的通讯开发难度,通过EC可以非常快速地开发基于mono和.net的通讯交互应用。E...

泥水佬
2015/12/01
656
0
为何受伤的总是技术人:《大牛被公司诬蔑,还要进派出所?》前传

《大牛被公司诬蔑,还要进派出所?》前传,为何受伤的总是技术人 事件简介:原 大牛被公司诬蔑,还要进派出所? 争论要点 1)一个巴掌拍不响? 2)程序员是"危险"行业,跟商人无法比,只有被...

i5ting
2016/05/15
7.1K
29
设计模式Java版,Gitbook开源电子书,含源码

Sunny在CSDN技术博客中陆续发表了100多篇与设计模式学习相关的文章,涵盖了七个面向对象设计原则和24个设计模式(23个GoF设计模式 + 简单工厂模式),为了方便大家学习,http://quanke.name ...

quanke_
2016/05/03
1.9K
5

没有更多内容

加载失败,请刷新页面

加载更多

这是对我最大的认可和鼓励

这是程序员cxuan的第18篇原创分享 可能一些小伙伴们不太清楚是怎么回事,是这样的。 我最近肝了三本 PDF,分别是 《Java核心技术总结》、《HTTP核心总结》、《程序员必知的硬核知识》、目录如...

osc_nc5ghpm9
28分钟前
0
0
折叠屏丨华为专家深度解读折叠屏连续性和拖拽适配介绍

折叠屏手机的出现,满足了用户对大屏幕的追求,但卓越的用户体验更离不开应用的适配与功能创新。距离Mate X面世已经一年的时间,应用适配情况如何?在适配过程中有哪些经验可以参考?有没有常...

软件绿色联盟
今天
0
0
一个 static 还能难得住我?

这是程序员cxuan的第15期原创分享 static 是我们日常生活中经常用到的关键字,也是 Java 中非常重要的一个关键字,static 可以修饰变量、方法、做静态代码块、静态导包等,下面我们就来具体聊...

osc_p23q7y3z
29分钟前
23
0
高中生写LOL外挂1年狂赚500万,落网前刚买下120万保时捷...

点击“开发者技术前线”,选择“星标🔝” 在看|星标|留言, 真爱 来源:交汇点| 编辑:可可 2020年3月,泰州姜堰警方接到一起特殊的报警:一名游戏玩家向民警反映,自己在玩英雄联盟对战时输...

开发者技术前线
今天
0
0
一次简单的服务器 cpu 占用率高的快速排查实战

前两天,朋友遇到一个线上 cpu 占用率很高的问题,我们俩一起快速定位并解决了这个问题。在征求朋友同意后,特发此文分享整个过程。本文以对话的形式展开,加上我的内心独白。文中对话与实际...

osc_emo7t12i
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部