跟高老师学习Web前端之40.

复古

       受雾霾天气的影响,往来太原的很多货车都堵在石家庄了。沟通、应急预备电话打了很多,客户不能断货,厂商不能欠货,一帮克服、业务忙疯了,实属无奈啊!雾霾导致车辆限号限行,很多地区还货车禁行,就连省内的配送也无法正常进行,原本的配送计划改了又改。祈求雾霾天气快点过去吧!

       今天起开始学习边框的风格---border-style。

(一)、边框风格

代码1
代码2
页面展示

      特别说明: nth-child表示选择器类型,后面会详细介绍,今天为了学习不同风格的边框,高老师先简单讲解了下。因浏览器解析代码时是从上到下解析,后一个代码的属性会覆盖前一个,因此需要用到nth-child,使得浏览器解析代码时能够从上到下依次展示。

       属性值中outset表示凸边,inset表示凹边,ridge表示凸槽,groove表示凹槽,double表示双线,solid表示实线,dashed表示虚线,dotted表示点,hidden表示边框隐藏,none表示没有边框。

       (二)、上一课我学习了边框的宽度,border-width:1px  4px  6px  10px  代表边框上、右、下、左的宽度,在边框风格设置中,border-style后的值属性与该属性的表示方法一致。如下所示:

代码书写
页面展示

      (三)、若不使用nth-child选择器,由于浏览器解析代码时后一个代码会覆盖前一个代码,因此页面显示均为最后一个属性值所展示的属性。如下所示:

代码1
代码2
页面展示

       以上就是今天所学内容,感谢高老师指导!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,037评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,590评论 0 7
  • 所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性。在本...
    xxiao1988阅读 3,582评论 0 2
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 7,249评论 0 20
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 9,028评论 1 19

友情链接更多精彩内容