css学习笔记div布局
web前端
发布日期:   2019-11-16
阅读次数:  

1. 使用table布局的一些缺点

  • 采用表格容易出错,嵌套层级很多，一旦出现嵌套顺序错乱，整个页面达不到效果
  • 采用表格布局页面不够灵活，动一块整个表格的布局就得变

2. 引入css

  • 外部样式表：link标签
  • 内部：style标签编写
  • 行内：直接标签内添加style

3 . css的块标签

  • span 内容显示在一行
  • div 默认占一行，自动换行

align属性

4. css的选择器

  • 元素选择器
  • id选择器 id必须是唯一的 #开头 js,jquery只会找到重复的id中的第一 个
  • 类选择器： .开头

5. CSS中的其它选择器

  • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

    • 属性选择器:

      a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

    • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

    • 子元素选择器: 父选择器 > 儿子选择器

    • 伪类选择器: 通常都是用在A标签上

5. css的浮动

浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

float属性:
                left
                right

            clear属性: 清除浮动
                both : 两边都不允许浮动
                left: 左边不允许浮动
                right : 右边不允许浮动
            流式布局

6. 盒子模型

CSS的盒子模型: 万物皆盒子

内边距:

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

CSS绝对定位:

  • position: absolute

  • top: 控制距离顶部的位置

  • left: 控制距离左边的位置

7. 选择器的优先级

  • 行内>id>class>元素
  • 就内原则，最后修改的成功

8. 使用div布局首页

  1. 创一个最外层div
  2. 第一部份: LOGO部分: 嵌套三个div
  3. 第二部分: 导航栏部分 : 放置5个超链接
  4. 第三部分: 轮播图
  5. 第四部分:
  6. 第五部分: 直接放一张图片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一张图片
  9. 第八部分: 放一堆超链接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .logo {
                float: left;
                width: 33%;
                height: 60px;
                border: 1px red solid;
                line-height: 60px;
            }

            .daohang {
                float: left;
                border: 1px red solid;
                height: 100%;
            }

            .amenu {
                color: white;
                font-size: 20px;
                height: 40px;
                line-height: 40px;
                text-decoration: none;
            }
            #logos{
                line-height:100% ;
            }
        </style>
    </head>
    <body>
        <div id='logos'>
            <div class='logo'><img src="./img/logo2.png" alt=""></div>
            <div class='logo'><img src="./img/header.png" alt=""></div>
            <div class='logo' style="text-align: center;">
                <a href="#">登陆</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
            </div>
        </div>

        <div id="blank" style="clear: both;">
        </div>

        <div style="background-color: black; height: 50px; text-align: center;">
            <div class='daohang'>
                <a href="" class="amenu">
                    首页
                </a>
                <a href="" class="amenu">
                    手机数码
                </a>
                <a href="" class="amenu">
                    电脑办公
                </a>
                <a href="" class="amenu">
                    电脑办公
                </a>
                <a href="" class="amenu">
                    办公
                </a>
            </div>
            <div class='daohang' style="line-height: 50px;height: 50px;position: right;">
                <div class="mui-input-row mui-search">
                    <input type="search" class="mui-input-clear" placeholder="">
                    <font size=4 color="white">搜索</font>
                </div>
            </div>

        </div>


        <div id="">
            <img src="./img/1.jpg" width="100%" alt="">
        </div>


        <div id="">
            <h2>最新商品<img src="./img/title2.jpg" alt=""></h2>
        </div>



        <div id="" style="border: 2px solid blueviolet;height: 480px; width: 100%;">
            <div id="left" style="float:left;width: 15%;height: 480px;border: 1px cyan solid;"><img  src="./products/hao/big01.jpg" width="100%" height="100%"></div>
            <div id="right" style="float:left;width:84%;height: 480px; border: 1px red solid;">
                <div style="height: 240px;width: 50%; float: left;border: coral 1px solid;"><img src="./products/hao/middle01.jpg" width="100%" height="240"></div>
                <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;border: 1px yellow solid;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>
            </div>
        </div>


        <div id="">
<img src="./products/hao/ad.jpg" width="100%">
        </div>


            <div id="">
            <h2>最新商品<img src="./img/title2.jpg" alt=""></h2>
        </div>



        <div id="" style="height: 480px; width: 100%;">
            <div id="left" style="float:left;width: 15%;height: 480px;"><img  src="./products/hao/big01.jpg" width="100%" height="100%"></div>
            <div id="right" style="float:left;width:84%;height: 480px; ">
                <div style="height: 240px;width: 50%; float: left;"><img src="./products/hao/middle01.jpg" width="100%" height="240"></div>
                <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>    <div style="float: left;text-align: center; height: 240px;width: 16%;">
                    <img src="./products/hao/small08.jpg" alt="" >
                    <p>高压锅</p>
                    <p style="color: red;">$298</p>
                </div>
            </div>
        </div>


        <div id="">
<img src="./img/footer.jpg" width="100%" alt="">
        </div>


        <div id="" style="text-align: center;">
<a href="">友情链接</a>
<a href="">友情链接</a>
<a href="">友情链接</a>
<a href="">友情链接</a>
<a href="">友情链接</a>
<a href="">友情链接</a>
<br>
copyright@xingqign
        </div>
    </body>
</html>

9. 使用div布局注册页面

总共是5部分

        2. 第一部分是LOGO部分
        3. 第二部分是导航菜单
        4. 第三部分是注册部分
        5. 第四部分是FOOTER图片
        6. 第五部分是一堆超链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .logo {
                float: left;
                width: 33%;
                height: 60px;
                border: 1px red solid;
                line-height: 60px;
            }

            .daohang {
                float: left;
                border: 1px red solid;
                height: 100%;
            }

            .amenu {
                color: white;
                font-size: 20px;
                height: 40px;
                line-height: 40px;
                text-decoration: none;
            }

            #logos {
                line-height: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            <div id='logos'>
                <div class='logo'><img src="./img/logo2.png" alt=""></div>
                <div class='logo'><img src="./img/header.png" alt=""></div>
                <div class='logo' style="text-align: center;">
                    <a href="#">登陆</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <div id="blank" style="clear: both;">
            </div>

            <div style="background-color: black; height: 50px; text-align: center;">
                <div class='daohang'>
                    <a href="" class="amenu">
                        首页
                    </a>
                    <a href="" class="amenu">
                        手机数码
                    </a>
                    <a href="" class="amenu">
                        电脑办公
                    </a>
                    <a href="" class="amenu">
                        电脑办公
                    </a>
                    <a href="" class="amenu">
                        办公
                    </a>
                </div>
                <div class='daohang' style="line-height: 50px;height: 50px;position: right;">
                    <div class="mui-input-row mui-search">
                        <input type="search" class="mui-input-clear" placeholder="">
                        <font size=4 color="white">搜索</font>
                    </div>
                </div>

            </div>



            <div style="background:url('./image/regist_bg.jpg '); width: 100%; height: 700px;">
                <div id="myform" style="position :absolute; border: black solid 5px;left: 300px; top:200px ;width:700px;height: 480px;background-color: white ;padding: 50px;padding-left: 200px;">
                    <table   width="60%" height="100%"  align="center">
                        <tr>
                            <td colspan="2"><font size=5 color="blue" >会员注册</font>USER REGISTER</td>

                        </tr><tr>
                            <td>用户名</td>
                            <td><input type="text" name="" id="" value="" /></td>
                        </tr><tr>
                            <td>密码</td>
                            <td><input type="password" name="" /></td>
                        </tr><tr>
                            <td>确认密码</td>
                            <td><input type="password" name="" /></td>
                        </tr><tr>
                            <td>Email</td>
                            <td><input type="email" name="" id="" value="" /></td>
                        </tr><tr>
                            <td>姓名</td>
                            <td><input type="text" name="" id="" value="" /></td>
                        </tr><tr>
                            <td>性别</td>
                            <td>
                                <input type="radio" name="sex" id="" value="" />男
                                <input type="radio" name="sex" id="" value="" />女
                                <input type="radio" name="sex" id="" value="" />妖
                            </td>
                        </tr><tr>
                            <td>出生日期</td>
                            <td><input type="date" name="" id="" value="" /></td>
                        </tr><tr>
                            <td>验证码</td>
                            <td><input type="text" name="" id="" value="" /></td>
                        </tr><tr>
                            <td></td>
                            <td><input type="submit" name="" id="" value="注册" /></td>
                        </tr>

                    </table>
                </div>

            </div>


            <hr>

            <div id="">
                <img src="./img/footer.jpg" width="100%" alt="">
            </div>


            <div id="" style="text-align: center;">
                <a href="">友情链接</a>
                <a href="">友情链接</a>
                <a href="">友情链接</a>
                <a href="">友情链接</a>
                <a href="">友情链接</a>
                <a href="">友情链接</a>
                <br>
                copyright@xingqign
            </div>
        </div>
    </body>
</html>
赏

  转载请注明: 星晴 css学习笔记div布局

 上一篇
CTF-基于约束的sql攻击 CTF-基于约束的sql攻击
CTF-基于约束的sql攻击 用空格代替空位置，表的字段约束为30个字符，如果插入admin null*30，那么就会重新插入新的记录，此时如果在select就会含有好几个admin用户 报错注入 floor报错简单的一个公式： and (
2019-11-16 starjian
ctf
下一篇 
burpsuit常用插件笔记 burpsuit常用插件笔记
burpsuit常用插件学习笔记0x01 sqlipysqlipy的安装由于sqlmap是Python语言编写的，而burp是java编写的所以需要先下载jython-standalone-2.7.0.jar文件，然后进行使用。jython
2019-11-16 starjian
渗透测试
  目录