文档章节

web网页开发第四课学习总结

书涵梦欣
 书涵梦欣
发布于 2019/03/26 22:52
字数 1120
阅读 0
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

左侧列表的实现

知识点: HTML中的标签:块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li>

CSS样式中的属性: 图片边框:border    高:height   宽:width     内边距:pandding      外边距:margin     边框4个角设为圆角:border-radius

文本内容居中:text-align      字体:font-size、font-family、font-weight、color       垂直居中:line-height 取消项目符号:list-style

浮动:float      字体下划线:text-decoration      背景图片:backround

第一部分:活力地带

“活力地带”这块的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>

对图片的设置:

内边距padding:一圈都是8px;

设置绿色的、实线的边border:1px solid #096

#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center;/*整个内容水平居中*/
}

#zuozhe img{
	border:1px solid #999;/*加边solid实线*/
	padding:8px;/*边与图片有个空白,类似相框*/
	border-radius:10px;/*圆角,值越大,角越园*/
}
	
#zuozhe span{
	margin:10px;/*一圈的距离*/
	display:block;/*改成盒子元素,可以识别盒子元素的一些属性:margin、border\padding*/
	border-top:1px #999 dashed;/*上面的虚线边 粗细是1,颜色是灰色 */
	border-bottom:1px #999 dashed;/*下边的虚线*/
	font-size:18px;/*字号*/
	padding-top:5px;/*内容距离边的距离-上面的*/
	padding-bottom:5px;/*下面的*/
}

”活力地带“css代码展示:

/*class选择器的写法 以点开头 后面跟着html标签上的class属性里面的那个名*/
.biaoti{
	color:#FFF;
	background-color:#328048;/*背景色绿色,取色器取到的*/
	height:40px;
	width:220px;
	line-height:40px;/*设置垂直居中,值要和height的值一样*/
	font-size:16px;
	font-weight:bolder;/*加粗,h5本来就是标题,已经加粗过了,不加也可以*/
	padding-left:30px;/*左边撑出来一个空*/	
	border-radius:0 10px 10px 0;/*和margin、broder、padding,都是4个值*/
	/*顺序:左上角、右上角、右下角、左下角,0代表没有圆角*/
}

#huoli ul{
	list-style:none;/*去点*/
	padding-left:20px;
	padding-top:10px;
}

#huoli ul li{
	margin:5px;/*每个li之间的距离*/
	width:90px;
	float:left;/*因为外面的ul的宽度太小了,所以原本应该都放在一行的,会自动的掉下去,变成一行只能展示2个li*/
	
}

#huoli ul li a{
	font-size:12px;
	text-decoration:none;/*去下划线*/
	color:#333;/*网站字体一般都不是黑色,扎眼*/
}
#huoli ul li a:hover{/*鼠标滑过变色*/
	color:#090;
}

#huoli ul li img{
	margin-right:5px;/*让图标和文字之间的距离大点*/
}

“文章分类、文章列表”:

列表样式:li标签:用背景更容易设置列表的图标样式 background-position:5px center;

背景图片左上角相对于li元素左上角位置 x轴 y轴

#list{
	clear:both;/*清空所有的自带的float影响*/
}

#list ul{
	list-style:none;
	padding:15px;/*不靠左边和上边,留空*/
}

#list ul li{
	padding-bottom:8px;
	padding-left:15px;
	border-bottom:1px #999 dotted;/*下面的虚线:dashed或者dotted*/
	margin-bottom:8px;/*我的边和其他人的字的距离,padding我的字和我的边的距离*/
	background:url(images/icon1.gif)  no-repeat;/*不重复的话,变成背景*/
	background-position:5px center;/*背景点的位置*/
}

 

书涵梦欣
粉丝 1
博文 12
码字总数 11046
作品 0
临沂
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
6
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
mvc框架--Razor

Razor 是一个轻巧而优雅的servlet mvc框架 # 又一个轮子? no,写就她是为了证实我个人的某些想法,并在这个过程中练练手,这两种冲动碰撞在一起,自然而然地产生了Razor # Razor的现在和未来...

dtubest
2013/01/25
3.1K
0
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2

没有更多内容

加载失败,请刷新页面

加载更多

如何在Javascript数组的开头添加新的数组元素?

问题: I have a need to add or prepend elements at the beginning of an array. 我需要在数组的开头添加或添加元素。 For example, if my array looks like below: 例如,如果我的数组如下...

技术盛宴
27分钟前
11
0
神经网络的经典结构是怎么设计出来的?

神经网络的经典结构是怎么设计出来的? 哈哈哈的回答-知乎 https://www.zhihu.com/question/392634888/answer/1391574322 很多神经网络的结构,确实是炼丹,没有什么道理可言。 有一些神经网...

吃着火锅
50分钟前
37
0
误删除flutter中的IOS文件夹如何恢复

今天在使用IOS真机调试app时,由于第一次使用xcode工具,一头蒙,所以误操作删除了targets下Runner,直接导致不能使用。 关键是找不到怎么恢复。如出现下图所示,都可以使用本方法解决。 图1...

学渣要逆袭
54分钟前
32
0
2021张宇考研数学全程班视频百度云

2021张宇考研数学全程班视频百度云资料链接:https://shimo.im/docs/xwSaKVXpLewxjT6x/ 公众号:小麦麦资料库

a先生gg
59分钟前
48
0
内存泄漏和内存溢出

1. 内存泄漏和内存溢出的概念 内存溢出: 是指程序运行过程中申请的内存大于系统能够提供的内存,导致无法申请到足够的内存。 内存泄漏:是指程序运行过程中分配内存给临时变量,用完之后没有...

加油加油再加油
今天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部