HTML+CSS基础知识（4）简单的广告界面

文章目录

​​1、网页实例​​

​​1.1 代码​​​​1.2 测试效果​​

1、网页实例

1.1 代码

css样式

/* 清除页面样式 */ *{ margin:0; padding: 0; } /* 统一页面的样式 */ body{ font:12px/1 宋体; } /* 设置outer大小 */ .outer{ width: 300px; /* height: 500px; background-color: #bfa; */ margin:50px auto; } /* 设置title的样式 */ .title{ /* 设置上边框 */ border-top:2px #019e8b solid; /* 设置盒子的高度 */ height: 36px; /* 设置背景样式 */ background-color: #f5f5f5; /* 设置title的行高*/ line-height: 36px; /* 设置title的内边距 */ padding: 0px 22px 0px 16px; } .title a{ text-decoration: none; float: right; color: red; } .title h3{ font:16px/36px "微软雅黑"; } /* 设置内容 */ .content{ border:1px solid #deddd9; /* 设置内边距 */ padding: 0px 28px 0px 20px; } .content h3{ margin-top: 14px; margin-bottom: 16px; } /* 设置内容中的超链接 */ .content a{ color: black; /* 去除超链接下划线 */ text-decoration: none; /* 设置字体大小 */ font-size:12px } /* 为超链接添加一个hover伪类 */ .content a:hover{ color: red; } /* 设置右侧的a的样式 */ .content .right{ /* 设置向右浮动 */ float: right; } /* 设置url的样式 */ .content ul{ /* 去除项目符号 */ list-style: none; /* 为ul设置一个下边框 */ border-bottom: 1px dashed #deddd9; } /* 取消最后一个ul的边框 */ .content .no-border{ border:none; } /* 设置li的样式 */ .content li{ margin-bottom: 15px; } .content .red{ color: red; }

html

1.2 测试效果

不加css样式

加css样式

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。