[学习笔记] HTML5&CSS3-充实笔记-05-09 [推广有奖]

51关注
7粉丝

已卖：1067份资源

大师

27%

还不是VIP/贵宾

威望: 1 级
论坛币: 83577 个
通用积分: 13687.4129
学术水平: 673 点
热心指数: 828 点
信用等级: 739 点
经验: 426051 点
帖子: 17349
精华: 0
在线时间: 3606 小时
注册时间: 2016-7-9
最后登录: 2025-12-30

楼主

HappyAndy_Lo 发表于 2019-5-9 09:35:01 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

对主内容区样式：因为有连个区域，一个最新消息区，一个图片展示区。其宽度一样，可以设置相同的class属性，用一个css样式即可
.consection{
      display: block;
      border: 0px #330000 solid;
      width: 400px;
      left: 10px; top:10px;
      margin:0px auto; padding:20px;
}
这里的block，表示区块固定大小，当文字超过区块时，文字会换行。
display: inline时，区块随内容变动，当文字超过区块时，区块会增大。

最新消息框，由<fieldset><legend>组合组成，CSS代码如下：
fieldset{
      border:1px solid;
      border-radius: 10px; /*圆角*/
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
}
fieldset legend{
      text-align: center;
}

图片展示区
比较简单，只需为图片设置圆角，边框设置为2px即可
img{
      margin: 3px;
      border-radius:15px;
      -moz-border-radius: 15px;       -webkit-border-radius: 15px;
      border: 2px solid;

}

体会：实践实践还是实践！