天津 重庆 南京 成都 济南 义乌 广州 佛山 贵阳 西安

七小时带你入门HTML CSS网页设计,自媒体图文列表布局(四)

发布时间:2022年5月3日责任编辑:赵大生
图文列表布局大家在编写代码的时候先不要忙着去写,首先要思考用什么样的代码,怎样去布局,怎样用最简单的代码去实现同样的效果,下面贴上我自己写的html代码标签:这是我的第一个网页BODY标签表示网页主体元素的容器,它包含了网页所有的html标签如:文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面...知识点:这里我用了一个class属性,它是用来定义当前标签的样式名,我这用list这个名去定义这个div的样式,如需定义多个名,可以用空格分开,那么在css样式表里面就用.list{}来表示。a则是超文本链接标签,用href属性来描述链接的地址,target="_blank"表示用鼠标点击链接会从浏览器的新窗口去打开这个链接地址,我这里把img标签放在a标签里面表示点击这张图片就能够跳转这个链接地址。其他的标签我已经在上一篇文章都详细介绍了,不是很明白的同学可以翻阅上篇文章。从上面的代码看,我用了三个div来布局,第一个list可以控制整个区块的样式,left则是定义往左方布局,right就是定义往右方布局。首先,我想给list整个区域限制一个宽度、高度、内边距和背景颜色,那么我们就应该这样写:.list { width: 800px; /*宽度800像素*/ height: 80px; /*高度80像素*/ background: #f2f2f2; /*灰色的背景颜色*/ padding: 15px; /*15像素的内边距*/}接下来我让left也限制一个宽度,并往左边浮动:.left { width: 120px; /*宽度120像素*/ float: left; /*往左边浮动*/ }那么right就应该往右边浮动,并限制一个宽度,注意:左右两边的宽度不能大于整个区域的宽度.right { width: 660px; /*宽度660像素*/ float: right; /*往右边浮动*/ }接着左边图片我们需要定义一个大小.left img { width: 120px; /*高度120像素*/ height: 80px; /*宽度80像素*/}最后右边的标题和文章简介也需要定义样式.right h2 { font-size: 16px; /*16像素的字体大小*/ color: #333; /*字体颜色为黑色*/ line-height: 24px; /*24像素的行高*/ margin: 5px 0; /*上下为5像素的外边距*/}.right p { font-size: 14px; /*14像素的字体大小*/ color: #999; /*字体颜色为浅黑色*/ line-height: 24px; /*24像素的行高*/ margin: 0 0 5px 0; /*下边为5像素的外边距*/}这样一个简单的图文列表布局就完成了,当然,布局的方式有很多种,这只是其中一个方法,也欢迎大家留言分享一下其他的布局方式,谢谢观看!!!
网站简介 联系方式 隐私政策 投诉及建议 发展历程 垃圾信息处理邮箱tousu572@163.com
icp备案号 浙ICP备10048612号 不良信息举报平台 互联网安全管理备案 Copyright 2021 www.100jianzhan.com All Rights Reserved