Community Learn Tools Library Leisure

English

Home > List of blog posts > 《CSS基础》2019-12-20作业笔记

Blogger Information

Blog 26

fans 1

comment 1

visits 19728

Special Recommendation

More>

Related recommendations

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <h3>用户注册</h3>
    <!--表单 用户与网站数据交换的工具-->
    <form action="check.php" method="post">
        <p>
            <label for="username">账号：</label>
            <input type="text" name="username" id="username">
        </p>
        <p><label for="password">密码：</label>
            <input type="text" name="password" id="password">
        </p>
        <!--下拉列表 select option-->
        <p>
            <select name="level" id="">
                <option value="1">会员1</option>
                <option value="2">会员2</option>
                <option value="3">会员3</option>
                <option value="4">会员4</option>
            </select>
        </p>
        <p>
            <input type="hidden" name="user_id" value="101">
        </p>
        <!--单选框-->
        <p>
            <input type="radio" name="gender" id="male" checked><label for="male">男</label>
            <input type="radio" name="gender" id="female"><label for="female">女</label>
        </p>
        <!--复选框-->
        <p>
            <p>
                <label for="">爱好：</label>
            </p>
            <input type="checkbox" name="hobby[]" id="lq"><label for="lq">打篮球</label>
            <input type="checkbox" name="hobby[]" id="yy"><label for="yy">游泳</label>
            <input type="checkbox" name="hobby[]" id="ymq"><label for="ymq">羽毛球</label>
        </p>
        <p>
            <button>提交</button>
        </p>
    </form>
</body>
</html>

总结

1.action里面填写提交的php页面;method表单提交方式有get和post两种常用方式，get方式直接提交数据显示在url上，post通过表头提交方式隐藏提交
2.input标签，type属性text是编辑框、radio是单选框，要实现单选框效果还要设置name属性一致，checked默认选择项、checkbox是复选框，name属性需要设置成数组形式带[]。hidden隐藏域方式提交数据，页面不显示，提交的数据中显示内容
3.button按钮
4、账号密码放置在label标签并且label标签的for属性与input标签的id属性进行关联后，可以实现点击账号密码后光标定位在对应的编辑框内
5.把以上这些标签放置在p标签内后，可以实现换行效果，p标签将以上标签转化为了块级标签，效果是这样？
6.select下拉框option下拉框内容，两个标签组合使用，checked属性可以放置在option中设置默认选择项。

css基础

css: 层叠样式表，用于控制页面元素的样式及布局
页面元素类型：块元素、行内元素、行内块元素
display：控制页面元素的显示类型

display: block: 块元素, 独占一行, 垂直排列, 可设置宽高
display: inline: 行内元素, 共享一行, 水平排列, 不可设置宽高
display: inline-block:行内块元素, 共享一行,水平排列, 可设置宽高
盒模型：
width: 宽度
height: 高度
padding: 内边距默认透明，不能设置样式和颜色
border: 边框不透明（粗细，样式，颜色）
margin: 外边距默认透明，不能设置样式和颜色
盒子大小计算：
宽度=左margin+左border+左padding+width+右padding+右border+右margin
高度=上margin+上border+上padding+height+下padding+下border+下margin
参数设置顺序：上->右->下->左
设置2到3个参数时第二个参数代表的左右
padding影响盒子大小的属性撑开盒子宽高，我们可以用box-sizing重置盒子大小
margin影响盒子位置的属性，margin-left / margin-right水平方向位置设置，auto可以设置自动居左、自动居中、自动居右

浮动

让元素飘起来呈现在文档布局的最上方，会影响文档布局
解决子元素浮动让父元素塌陷问题最简单的方法：overflow：hidden/auto

定位

position元素定位布局
我们默认的文档布局方式也叫静态定位:position: static
相对定位：元素相对于原来的位置进行定位positon: relative
绝对定位：positon: absolute
固定定位:总是相对于html进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素的垂直居中</title>
    <style>
        .parent{
            width: 400px;
            height: 300px;
            background-color: lightgreen;
            position: relative;
        }
        .sub{
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            margin: auto;
            /*1.将子元素转为定位元素*/
            position: absolute;
            /*2.子元素有宽高的限制，又是一个定位元素，与父元素之间有可以重新分配的空间*/
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="sub"></div>
    </div>
</body>
</html>

选择器

id>class>tag(标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*标签选择器*/
        div{
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }
        /*属性选择器*/
        /*.hello=div[class="hello"]*/
        /*类选择器*/
        .hello{
            background-color: lightgreen;
        }
        /*id选择器*/
        /*#php=div[id="php"]*/
        #php{
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="hello" id="php"></div>
</body>
</html>

伪类位置选择器

first-of-type代表第一个
last-of-type代表最后一个
nth-of-type(3)选中第三个
nth-of-type(-n+2)选择前两个，n从0开始
nth-last-of-type(-n+2)选择最后两个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类位置选择器</title>
    <style>
        /*选中子元素空格后面跟标签名称*/
        /*nth-child() 与子元素的位置相关*/
        div :nth-child(2){
            background-color: yellow;
        }
        /*先创建分子，再根据位置选择*/
        div p:nth-of-type(2){
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <p>今天天气不错</p>
        <h3>hello</h3>
        <p>php.cn</p>
        <p>php中文网</p>
        <h3>皮特猪</h3>
    </div>
</body>
</html>

作业实例

1、参考了老师素材库的字体图标引用方式
2、自己之前了解到的div及浮动的相关知识进行了浮动布局
3、上面学到的定位使用搜索图标定位到搜索框的位置，实际使用发现可能因为搜索框图标不是input的子元素，所以无法在上面进行定位，只是好像针对了div来进行定位，不知道我理解是否有偏差
4、搜索框后面的图标设置了内边距来撑开相互之间位置
5、ul使用行内元素来设置与span同一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1220实例</title>
    <link rel="stylesheet" href="CSS/CSS.css">
    <link rel="stylesheet" href="font/demo.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        .big-box{
            width: 1280px;
            height: 600px;
            margin: auto;
        }
        .top-left{
            float: left;
        }
        .top-right{
           float: right;
        }
        .top-right-l{
            float: left;
            position: relative;
            padding: 20px;
        }
        .sousuo{
            width: 440px;
            height: 45px;
            border:1px solid #999999;
            border-radius: 10px;
        }
        #sousuo-l{
            font-size: 35px;
            position: absolute;
            top: 25px;
            left: 420px;
        }
        #sousuo-r-1{
            padding: 5px;
            font-size: 40px;
        }
        #sousuo-r-2{
            padding: 5px;
            font-size: 40px;
        }
        #sousuo-r-3{
            padding: 5px;
            font-size: 40px;
        }
        #sousuo-r-4{
            padding: 5px;
            font-size: 40px;
        }
        #sousuo-r-5{
            padding: 5px;
            font-size: 40px;
        }
        #sousuo-r-6{
            padding: 5px;
            font-size: 40px;
        }
        .top-right-r{
            float: right;
            padding: 20px;
        }
        .clear{
            clear: both;
        }
        ul{
            list-style:none;
            display:inline-block;
            padding: 5px;
        }
        .tubiao{
            font-size: 50px;
            color: red;
        }
        .shuxian{
            display:inline-block;
            height: 50px;
            border-left: solid 1px #999999;
        }
        .kongge{
            display:inline-block;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <div class="top">
            <div class="top-left">
                <img src="static/images/logo.png" alt="">
            </div>
            <div class="top-right">
                <div class="top-right-l">
                    <input type="text" class="sousuo">
                    <span class="iconfont" id="sousuo-l">&#xe782;</span>
                </div>
                <div class="top-right-r">
                    <span class="iconfont" id="sousuo-r-1">&#xe629;</span>
                    <span class="iconfont" id="sousuo-r-2">&#xe61b;</span>
                    <span class="iconfont" id="sousuo-r-3">&#xec0a;</span>
                    <span class="iconfont" id="sousuo-r-4">&#xec14;</span>
                    <span class="iconfont" id="sousuo-r-5">&#xe60e;</span>
                    <span class="iconfont" id="sousuo-r-6">&#xec80;</span>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="nav">
            <div>
                <span class="iconfont tubiao">&#xec39;</span>
                <ul>
                    <li>咨询</li>
                    <li>学习</li>
                </ul>
                <div class="shuxian"></div>
                <ul>
                    <li>器材</li>
                    <li>大赛</li>
                </ul>
                <ul>
                    <li>大师</li>
                    <li>裤子</li>
                </ul>
                <ul>
                    <li>学院</li>
                    <li>影视</li>
                </ul>
                <ul>
                    <li>实战</li>
                    <li>其他</li>
                </ul>
                <div class="kongge"></div>
                <span class="iconfont tubiao">&#xec36;</span>
                <ul>
                    <li>爱好</li>
                    <li>姐妹</li>
                </ul>
                <div class="shuxian"></div>
                <ul>
                    <li>有品</li>
                    <li>坦克</li>
                </ul>
                <ul>
                    <li>图片</li>
                    <li>气球</li>
                </ul>
                <ul>
                    <li>喝水</li>
                    <li>毛线</li>
                </ul>
                <ul>
                    <li>飞机</li>
                    <li>其他</li>
                </ul>
                <div class="kongge"></div>
                <span class="iconfont tubiao">&#xec39;</span>
                <ul>
                    <li>软件</li>
                    <li>技能</li>
                </ul>
                <div class="shuxian"></div>
                <ul>
                    <li>学习</li>
                    <li>富强</li>
                </ul>
                <ul>
                    <li>爱国</li>
                    <li>互助</li>
                </ul>
                <ul>
                    <li>敬业</li>
                    <li>仁义</li>
                </ul>
                <ul>
                    <li>友善</li>
                    <li>其他</li>
                </ul>
                <div class="kongge"></div>
                <span class="iconfont tubiao">&#xec1b;</span>
                <ul>
                    <li>编程</li>
                    <li>美女</li>
                </ul>
                <div class="shuxian"></div>
                <ul>
                    <li>吃饭</li>
                    <li>上海</li>
                </ul>
                <ul>
                    <li>周易</li>
                    <li>杭州</li>
                </ul>
                <ul>
                    <li>黄山</li>
                    <li>北京</li>
                </ul>
                <ul>
                    <li>合肥</li>
                    <li>其他</li>
                </ul>
            </div>
        </div>
        <div>
            <img src="static/images/2.jpg" alt="" style="margin-top: 20px;">
            <img src="static/images/banner-right.jpg" alt="" style="margin-top: 20px;margin-left: 10px;">
        </div>
    </div>
</body>
</html>

完成效果图

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：对于页面元素的划分, 有不同学标准, 写页面的思路很清楚, 对于页面结构的分析 , 可以有多种方式, 老师只是提供了一种

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

《环境搭建-Visual Studio Code及常用插件安装》2020-04-01作业笔记

2020-04-10 13:39:53