第四周周报

~☜~

于 2021-12-12 15:14:26 发布

阅读量394

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_61601160/article/details/121887984

版权

美化表单元素

新的伪类

1. focus

浏览器默认设置了聚焦时的outline
元素聚焦(点击文本框后，即可以输入时)时的样式
涉及到的属性：tabindex:根据此属性的取值确定被聚焦的顺序（按Tab键聚焦）
outline(外边框)设为none则聚焦时无外边框

outline-offset:外边框的偏移量（若样式为auto则无效，若为solid有效）

2. checked

单选或多选框被选中的样式

<style>
        input:checked+label{/*选中单选框的下一个元素（兄弟元素）*/
           color: pink;
        }
    </style>
</head>
<body>
   <input type="radio" id="radMale" name="gender">
    <label for="radMale">男</label>
    <input type="radio" id="radFemale" name="gender">
    <label for="radFemale">女</label>
</body>

选中某项时文字变成粉色

常见用法

1. 重置表单元素样式

input,textarea,button,select{
    border:none;
}
input:focus,textarea:focus,button:focus,select:focus
{
    outline:none;
    outline-offset: 0;
}

text-align:行盒居中。
表单元素都为行盒

2. 设置textarea是否允许调整尺寸

css属性resize：

both：默认值，两个方向都可以调整尺寸
none：不能调整尺寸
horizontal: 水平方向可以调整尺寸
vertical：垂直方向可以调整尺寸

3. 文本框边缘到内容的距离

方式一
设置padding
方式二
text-indent：首行文本缩进，只有第一个文字生效，超过后靠拢

4. 控制单选和多选的样式

例子


        .radio-item .radio {
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;
        }

        .radio-item input:checked+.radio{
            border-color: #008c8c;
        }

        .radio-item input:checked~span{
            color:#008c8c;
        }

        .radio-item input:checked+.radio::after {
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background: #008c8c;
            margin-left: 3.5px;
            margin-top: 3.5px;
            border-radius: 50%;
        }

        .radio-item input[type="radio"]{
            display: none;
        }

<body>

    <p>
        请选择性别：
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>男</span>
        </label>

        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>
</body>

表格元素

在css技术出现之前，网页通常使用表格布局。

后台管理系统中可能会使用表格。

前台：面向用户

后台：面向管理员。对界面要求不高，对功能性要求高。

表格不再适用于网页布局？表格的渲染速度过慢。
rowspan:跨行
colspan:跨列

其他元素

1. abbr

缩写词

2. time

提供给浏览器或搜索引擎阅读的时间

3. b （bold）

以前是一个无语义元素，主要用于加粗字体

4. q

一小段引用文本
cite属性：引用的地址

5. blockquote

大段引用的文本
cite属性：引用的地址

6. br

无语义
主要用于在文本中换行

7. hr

无语义
主要用于分割

8. meta

还可以用于搜索引擎优化（SEO）
网站描述

9. link

链接外部资源（CSS、图标）

rel属性：relation，链接的资源和当前网页的关系（取值为icon时网页名左边出现所链接的图标）

type属性：链接的资源的MIME类型

@规则

at-rule: @规则、@语句、CSS语句、CSS指令

1. import

@import “路径”;

表示在使用一个css时导入另外一个css文件

2. charset

@charset “utf-8”; 此指令要写必须写在CSS文件的第一行

告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行

web字体和图标

1.web字体（不常见，网页响应时间慢）

用户电脑上没有安装相应字体，强制让用户下载该字体

使用@font-face指令制作一个新字体

@font-face{
    font-family:"good night";/*字体名字*/
    src:url("");/*字体路径*/
}

2.字体图标

iconfont.cn
可以看为文字，i元素为行盒，可设置颜色，大小等

布局

1.多栏布局

两栏布局（左右浮动，分别定宽；若主区不定宽，则主区域设置overflow：hidden（创建BFC））
不想自适应就定宽
三栏布局
文字是行盒会避开浮动元素，但块盒不会，所以还是要创建BFC

2.等高

CSS3的弹性盒
JS控制
伪等高
设置（侧边栏）高度为很大，再设置margin-bottom为负的很大，那么盒子的总高度只有他们的绝对值之差那么大，清除浮动的地方不会将整个div撑开，看到的下面的实际不是侧边栏，而是背景颜色，这时只需要将超出的背景隐藏（overflow：hidden）

3.元素书写顺序

一般将侧边栏靠前书写，若先写主区域，则不给主区域创建BFC,但是要设置左右margin，留出侧边栏空间，再使侧边栏相对与外层容器绝对定位

4.后台页面的布局

~☜~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四周周报

美化表单元素新的伪类1. focus浏览器默认设置了聚焦时的outline元素聚焦(点击文本框后，即可以输入时)时的样式涉及到的属性：tabindex:根据此属性的取值确定被聚焦的顺序（按Tab键聚焦）outline(外边框)设为none则聚焦时无外边框outline-offset:外边框的偏移量（若样式为auto则无效，若为solid有效）2. checked单选或多选框被选中的样式<style> input:checked+label{/*选中单选框的下一
复制链接

扫一扫