武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第23节 CSS3圆角边框 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/17 传媒学院

2 1.CSS3圆角边框 语法 border-radius:25px; border-top-left-radius:2px;
所有角的圆半径为25个像素 border-top-left-radius:2px; 左上角的圆半径为2个像素 border-top-right-radius:2px; 右上角的圆半径为2个像素 border-bottom-right-radius:2px; 右下角的圆半径为2个像素 border-bottom-left-radius:2px; 左下角的圆半径为2个像素 2019/5/17 传媒学院

3 2.圆角边框的实例 2019/5/17 传媒学院

4 2.1 设计 用一个大div包含所有内容 d1中包含两个div id：d1；大小200*300；边框为：实线，细，青色 上面的div显示标签
下面的div显示内容（用ul显示内容） id：d12；大小：200*270，背景颜色：无 框架代码 2019/5/17 传媒学院

5 2.2 设置d1的样式 大小：200*300 边框：实线；细；青色 左、右上角的圆角边框
border-top-left-radius:11px; border-top-right-radius:11px; 2019/5/17 传媒学院

6 2.3 设置d11的样式 大小：200*30 背景颜色：青色 左、右上角的圆角边框 在div中添加文字：健康教育
border-top-left-radius:10px; border-top-right-radius:10px; 在div中添加文字：健康教育 文字颜色：白色；文字大小：16px 设置文字的左填充为10 要保证整个div宽带是200，如何实现？（填充＋宽度＝200） 设置文字上下方向居中 如何实现？（调节上填充，上填充2，高28） 2019/5/17 传媒学院

7 2.4设置d12的样式及内容 大小：200*270 内容 ul列表包含以下3个列表项 脚崴了怎么办 10-01 夏天中暑了怎么办 10-12
脚崴了怎么办 夏天中暑了怎么办 六个快速治咳嗽的食疗秘方 11-05 2019/5/17 传媒学院

8 2.5设置d12中ul的样式 设置ul中文字大小为12px ul的默认上外边界为1行 ul的默认的左填充为1个tab键长度
2019/5/17 传媒学院

9 2.6美化列表条目后面的日期 目标：日期右对齐，但条目的标题位置保持不变 思路 条目中包含标题和日期，默认在标签li中左对齐
单独让日期右对齐 用span标签包含日期 设置其样式为：方框-浮动-右对齐 这意味着：span包含的内容会在li中右对齐 日期和边框有2px的间隔 span标签右边界为2 2019/5/17 传媒学院

10 2.7 给条目添加链接 给三个条目的文字内容添加空连接 修改链接的效果 比如 链接的默认颜色为黑色 链接没有下划线
<a href="#">脚崴了怎么办</a> 修改链接的效果 链接的默认颜色为黑色 链接没有下划线 鼠标放在链接上，链接变为绿色 2019/5/17 传媒学院

11 作业 实现如图的效果，给列表条目添加空链接，鼠标放在其上时，对应条目文字变为绿色 素材 健康教育 脚崴了怎么办 夏天中暑了怎么办
六个快速治咳嗽的食疗秘方 2019/5/17 传媒学院