Python_day21--div、西开的网站重构、左侧、水平导航栏

本文链接：https://blog.youkuaiyun.com/Biu_Biu_0329/article/details/80929990

一、div简介

1、定义

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

2、用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

3、注意

<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

提示：请使用 <div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。

二、div的居中对齐

首先我们要在样式中对div进行定义和设置，分为两种情况：

1）我们可以在头文件中设置标签的样式，通过id或类属性将其传递过去；

2）我们也可以在标签内部直接进行设置

注意：我们对哪里的对象进行设置就在对哪个标签设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_div标签居中</title>
 
</head>
<body>



<div  style="text-align: center;line-height:100px;border: 1px solid greenyellow;width: 300px;height: 300px;margin: auto;">
    <P>NEWS WEBSITE</P>


</div>

<div style="width:200px;height:100px;border:1px solid red;text-align:center;line-height:100px;">居中对齐</div>



</body>
</html>

设置宽度：width
高度：height
div整体居中：margin:auto
边框：border：边框厚度1px solid
div内部文字居中：text-align:center;line-height:100px

三、css 和div重构西开官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style>

        #alogo {
            width: 100%;
            height: 91px;
            text-align: center;
        }

        #logoLeft {
            width: 49%;
            height: 100%;
            float: left;
            text-align: center;

        }

        #logoRight {
            width: 49%;
            height: 100%;
            float: right;
        }

        span {
            vertical-align: middle;
            font-size: 20px;
            color: #323232;
            margin-left: 10px;
        }

        #banner {
            width: 100%;
            height: 70px;
            background-color: dodgerblue;
            line-height: 70px;
        }

        #index {
            font-size: 25px;
        }

        .children {
            display: inline-block;
            /*# 这个标签占用的权重*/
            /*1 2 3 4*/
            flex: 2;
            text-align: center;
        }

        .children1{
            display: inline-block;
            /*# 这个标签占用的权重*/
            /*1 2 3 4*/
            flex: 1;
            text-align: center;

        }
        #father{
            display: flex;
            width: 100%;
        }

        li a {
            font-size: 20px;
            color: white;
            /*取消链接的下划线等装饰设置*/
            text-decoration: none;
        }

    </style>

</head>
<body>


<!--先创建一个logo的盒子-->
<div id="alogo">
    <div id="logoLeft">
        <img src="img/01_logo.png" align="center">
        <span>西部开源欢迎你！</span>
    </div>


    <div id="logoRight" style="line-height: 91px">

        <img src="img/02_phone1.png" align="center">
        <span>029-86699937 029-88262419</span>
    </div>


</div>


<!--创建导航栏-->
<div id="banner">

    <!--导航栏信息无序列表-->
    <ul id="father">
        <li class="children1"><a id="index" href="#">首页</a></li>   
        <li  class="children"><a href="http://www.westos.org/curriculum-web">课程中心</a></li>    
        <li  class="children"><a href="http://www.westos.org/course-features"> 教学体系</a></li>   
        <li  class="children"><a href="http://www.westos.org/course-features">新闻资讯</a></li>   
        <li  class="children"><a href="http://www.westos.org/course-features">学习资源</a></li>   
        <li  class="children"><a href="http://www.westos.org/course-features">Linux企业文化</a></li>   

    </ul>

</div>
<img src="http://www.westos.org/wp-content/uploads/2017/10/28637F4B632210664E389C4EF4CF25A5_28.jpg" style="width: 100%">

</body>
</html>

四、左侧导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧导航栏</title>

    <style>
        ul{
            /*清除无序列表前面的.*/
            list-style-type: none;
            /*外边距*/
            margin: 0;
            /*内边距*/
            padding: 0;
            /*设置背景颜色*/
            background-color:#E0E0E0;
            width: 10%;
        }

        li a{
            /*去掉a标签的下划线*/
            text-decoration: none;
            /*设置子题颜色*/
            color: black;
            /*显示块元素的链接， 让整体作为可点击的区域， 不止是文本*/
            display:block;

            /*设置内边距*/
            padding: 10px 30px;
        }



        li a:hover{
            background-color: green;
            color: white;
        }

        li a.active{
            background-color: #323232;
            color: white;
        }


    </style>
</head>
<body>

<!--先创建导航栏---创建无序列表-->
<ul>
    <li><a class="active" href="#">首页</a> </li>
    <li><a href="#">新闻</a> </li>
    <li><a href="#">联系</a> </li>
    <li><a href="#">联系</a> </li>
</ul>


</body>
</html>

五、水平导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_水平导航栏</title>

    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f3f3f3;
        }

        li {
            float: left;
        }

        li a {
            /*去掉a标签的下划线*/
            text-decoration: none;
            /*设置子题颜色*/
            color: black;
            /*显示块元素的链接， 让整体作为可点击的区域， 不止是文本*/
            display: block;

            /*设置内边距*/
            padding: 10px 30px;

        }



        /*jquery, bootstrap, vue*/

        /*导航栏*/
        li a.index {
            background-color: green;
            color: white;
            font-size: 18px;
        }

        li a:hover {
            background-color: darkgrey;
            color: white;
        }

    </style>


</head>
<body>
<ul style="display: flex;width: 100%;">
    <li><a class="index" href="#">首页</a></li>   
    <li><a href="#">新闻</a></li>   
    <li><a href="#">照片</a></li>   
    <li><a href="#">联系</a></li>
</ul>
</body>
</html>