网页设计方框 第1篇
现场提问，用XMind现场总结，再次加深学生印象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ytPfFupZ-1667629806126)()]
完成昨天用户注册页面的样式设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SeSOma4r-1667629806127)()]
网页设计方框 第2篇
用axure现场画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXFfSgAW-1667629806121)()]
给区块设置边框
border: 1px solid black;
给控件设置圆角边框
border-radius:5px
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tab4ncH4-1667629806123)()]
表单控件、边距、样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44aIiT9E-1667629806123)()]
表单控件、边距、样式
现场提问
网页设计方框 第3篇
用axure现场画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j03CIZqs-1667629806124)()]
在HTML网页中根据编写CSS方式的不同可以将CSS分为三类：行内样式、内部(嵌)样式、外部样式
注意：行内样式只对当前标签生效
注意：内嵌样式在当前页面中有效
注意：外部样式可以用在同一个网站的多个网页中，只需要在各个页面中去引用外部样式即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-npXOPm9Q-1667629806124)()]
不同的规则，该如何选择和取舍呢？
1.外边距 -上下外边距重叠 -左右外边距相加 -margin : 上右下左 [或者margin-top:x;margin-left:y;…] 2.内边距 -块内部的内容是否顶着边框,看内边距. -padding : 上右下左 套路与margin相同 3.居中 -块居中(横向居中) : margin:0 auto -块内内容居中 : text-align:center
页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。一个盒子的完整大小由：内容content+内边距padding+边框border+外边距margin组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2RBv3oX-1667629806125)()]
如果想让一个元素居中显示，只需设置:margin:0 atuo;即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AeLyOE7j-1667629806125)()]
外边距、内填充、浮动
知识点补充
清除浮动：
clear: both
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZOlr9ZU-1667629806126)()]
外边距、内填充
1、两个区块之间设置20个像素的间隔，该如何实现？
2、如何让区块中的内容不定格？
3、如何让两个区块显示在同一行？
网页设计方框 第4篇
顶部border-top-color、右侧border-right-color、底部border-bottom-color、 左侧border-left-color
透明边框的使用：在有些情况下网页制作人员可能想创建一个不可见的边框。这就引人了边框颜色值transparent（在CSS2中引入）。这个值用于创建有宽度的不可见边框。假设你希望包含3个链接的一组链接有边框，默认地这些边框不可见，不过，鼠标停留在链接上时边框要凸起。为此可以让边框在链接处于非悬停状态下透明：
a:link, a:visited {border-style: solid; border-width: 5px; border-color: transparent;}a:hover {border-color: gray;}
利用transparent，使用边框就像是额外的内边距一样，此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区（假设有可见的背景）。警告：在IE7之前，IE/Win没有提供对transparent的支持。在以前的版本中，IE会根据元素的color值来设置边框颜色。