java day23 CSS

最新推荐文章于 2021-01-09 17:52:39 发布

wzyyj

最新推荐文章于 2021-01-09 17:52:39 发布

阅读量124

点赞数

分类专栏： java学习日记文章标签： html css css3 定位

本文链接：https://blog.csdn.net/qq_43642864/article/details/111597018

版权

java学习日记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、CSS简介

1.1 什么是CSS

CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的
应用优先级高的，不冲突的共同作用

1.2 CSS能干什么

修饰美化html网页。
外部样式表可以提高代码复用性从而提高工作效率。
html内容与样式表现分离，便于后期维护。

1.3 CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。

1.4 基础语法

选择器｛属性：值;属性:值…… ｝

id选择器：
#news{
margin-left: 24px;
}

类选择器：
.menu{
float: left;
margin-right: 31px;
text-decoration: none;
font:13px/23px Arial,sans-serif;
}

通配符选择器：
* {
color: #00f;
}

标签选择器：
h1{
color: red;
}
p{
font-size: 50px;
color: aquamarine;
}

属性选择器
p[name=“p1”][a=“p1”]{
color: red;
font-size: 22px;
}

派生选择器
ul li{
color: red;
}

相邻选择器
li+li{
color: red;
}

锚伪类选择器：
boby{
background-color: red;
}
a:link{
color: black;
font-size: 15px;
}
a:hover{
color: red;
font-size: 20px;
}
a:active{
color: greenyellow;
}
a:visited{
color: darkorange;
}

2、CSS导入方式

2.1 内嵌式（内联式）

把css样式嵌入html标签中

<p style="color: red">Mybatis是如何进行分页的?分页插件的原理是什么?</p>

2.2 内部式

在head标签中使用style标签引入css

<style type="text/css">
        span{
            color: blue;
        }
    </style>

2.3 外部式

将css样式抽成一个单独文件，使用者直接引用

<link href="../css/mycss.css" rel="stylesheet">

3、div盒子模型

在这里插入图片描述

3.1 边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        页面布局:
            table+css
            div+css
    -->
    <style type="text/css">
        #one{
            border:solid red 1px;
            /*内边距 内容与所有边框的距离*/
            /*padding: 10px;*/
            /*内容与左边框的距离*/
            padding-left: 10px;
        }
        #two{
            border: solid blue 1px;
            /*外边距 当前div与其他div边框的距离*/
            margin: 10px;
        }
        #three{
            border: solid green 1px;
        }
    </style>
</head>
<body>
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
</body>
</html>

3.2 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_相对定位</title>
    <style type="text/css">
        /*相对定位：相对于原有的位置进行改变，保留原来的位置，不影响其他div*/
        #one{
            border:solid red 1px;
        }
        #two{
            border: solid blue 1px;
            position: relative;
            left: 10px;
            top: 10px;
        }
        #three{
            border: solid green 1px;
        }
    </style>
</head>
<body>
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
</body>
</html>

3.3 绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_绝对定位</title>
    <style type="text/css">
        /*绝对定位:相对于拥有position属性的父标签进行定位，如果父标签没有position属性
                    继续往上寻找，如果一直没有，则相对于body定位*/
        #one{
            border:solid red 1px;
        }
        #two{
            border: solid blue 1px;
            /*绝对定位*/
            position: absolute;
            left: 0px;
        }
        #three{
            border: solid green 1px;
        }
    </style>
</head>
<body>
    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>
</body>
</html>

3.4 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_浮动</title>
    <style>
        #one{
            width: 100px;
            height: 100px;
            border: solid red 1px;
            float:left;
        }
        #two{
            width: 100px;
            height: 100px;
            border: solid blue 1px;
            float: right;
        }
        #three{
            width: 100px;
            height: 100px;
            border: solid green 1px;
        }
        /*清除浮动状态*/
        #clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="one" >1</div>
    <div id="two">2</div>
    <div id="clear"></div>
    <div id="three">3</div>
</body>
</html>

案例展示

模仿百度首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <link rel="icon" href="icon/baidu_logo.png" type="image/x-icon">
    <style type="text/css">
        .top_bar_left{
            float: left;
        }
        #news{
            margin-left: 24px;
        }
            .menu{
                 float: left;
                 margin-right: 31px;
                 text-decoration: none;
                 font:13px/23px Arial,sans-serif;
             }
        .menu1{
            float: left;
            margin-right: 25px;
            text-decoration: none;
            font:13px/23px Arial,sans-serif;
        }
        .menu2{
            position: absolute;
            right: 150px;
            float: left;
            margin-left: 2px;
        }
        .menu:hover{
            float: left;
            margin-right: 31px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: dodgerblue;
        }
        .top_bar_right{
            float: right;
        }
        #weather_pictures img{
            height: 23px;
            margin-right: 31px;
        }
        #temperature{
            margin-right: 45px;
        }
        #head_logo{
            border-radius: 50%;
            height: 23px;
        }

        .menu_name{
            position: relative;
            float: right;
            font:13px/23px Arial,sans-serif;
            margin-right: 10px;
        }
        .menu_name #username{
            padding-left: 10px;
        }

        #baidu_logo{
            position: relative;
            align-self: center;
            margin-left: 640px;
        }
        #baidu_logo img{
            height: 130px;
        }
        #middle{
            padding-top: 40px;
        }
        #serach_input{
            height: 16px;
            width: 520px;
            padding: 12px 16px;
            font-size: 16px;
            vertical-align: top;
            outline: 0;
            box-shadow: none;
            border-radius: 10px 0 0 10px;
            border: 2px solid #c4c7ce;
            background: #fff;
            color: #222;
            overflow: hidden;
            box-sizing: content-box;
            margin-left: 440px;
        }
        #baidu_search{
            cursor: pointer;
            width: 108px;
            height: 44px;
            line-height: 45px;
            line-height: 44px\9;
            padding: 0;
            background-color: #4e6ef2;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            color: #fff;
            box-shadow: none;
            font-weight: 400;
            border: none;
            outline: 0;
            text-align: center;
        }
        .search{
            margin-top: 10px;
        }
        .bar{
            margin-top: 100px;
            margin-left: 250px;
            padding-bottom: 10px;
        }
        .bar a{
            margin-right: 15px;
        }
        .title{
            margin-left: 250px;
            font: 20px/30px Arial,sans-serif;
            padding-bottom: 10px;
        }
        .new_img{
            margin-left: 250px;

        }
        #new_img img{
            border-radius: 10px;
        }
        .news_left{
            float: left;
            width: 800px;

        }
        .news_right{
            float: right;
        }

        .bar_right{
            margin-top: 100px;
        }
        .bar_right a{
            position: relative;
            margin-right: 270px;
        }
        .counts{
            float: right;
            margin-right: 275px;
        }
        .number{
            padding-right: 20px;
        }
        p{
            font: 15px Arial,sans-serif;
        }
    </style>
</head>
<body>
<div id="top">
    <div class="top_bar_left">
        <a href="#" class="menu" id="news">新闻</a>
        <a href="#" class="menu" id="hao123">hao123</a>
        <a href="#" class="menu" id="maps">地图</a>
        <a href="#" class="menu" id="video">视频</a>
        <a href="#" class="menu" id="postbar">贴吧</a>
        <a href="#" class="menu" id="study">学术</a>
        <a href="#" class="menu" id="more">更多</a>
    </div>

    <div class="top_bar_right">
        <div class="menu1"><a href="#" id="guangzhou">广州</a></div>
        <a href="#">
            <div class="menu1" id="weather_pictures"><img src="icon/a1.png"></div>
            <div class="menu2" id="temperature"><a href="#" >19°C</a></div>
        </a>
        <div class="menu1"><a href="#" >设置</a></div>
        <div class="menu1">
            <a href="#"><img id="head_logo" src="icon/touxiang.jpg"></a>
            <div class="menu_name">
                <a href="#" id="username">岁月如歌</a>
            </div>
        </div>
    </div>
</div>
<div id="middle">
    <div id="baidu_logo" ><img src="icon/baidu.png"></div>
    <div class="search"><input id="serach_input" ><input type="button" id="baidu_search" value="百度一下"></div>
</div>


<div id="bottom_news">
        <div class="news_left">
            <div class="bar">
                <a href="#">我的关注</a>
                <a href="#">推荐</a>
                <a href="#">导航</a>
            </div>
            <div class="title">荣耀V40再曝支持45W无线充；小米11发布时间确定没有Pro？</div>
            <div class="new_img"> <img src="icon/newphoto.png"> </div>
        </div>


        <div class="news_right">
            <div class="bar_right">
                <a href="#">百度热榜</a>
                <a href="#">换一换</a>
            </div>
            <div class="specific_news">
                <p>
                    <span class="number">1</span>
                    <span class="new_title"><a href="#">美舰擅闯南沙海域 中方警告驱离</a></span>
                    <span class="counts"><a href="#">483万</a></span>
                </p>

                <p>
                    <span class="number">2</span>
                    <span class="new_title"><a href="#">检方认为劳荣枝主观恶性极深</a></span>
                    <span class="counts"><a href="#">466万</a></span>
                </p>
</a>
                <p>
                    <span class="number">3</span>
                    <span class="new_title"><a href="#">大连:开展全员核酸检测</a></span>
                    <span class="counts"><a href="#">450万</a></span>
                </p>

                <p>
                    <span class="number">4</span>
                    <span class="new_title"><a href="#">18岁大学生立遗嘱财产留给朋友</a></span>
                    <span class="counts"><a href="#">411万</a></span>
                </p>

                <p>
                    <span class="number">5</span>
                    <span class="new_title"><a href="#">大连海洋大学出现疫情?校方回应</a></span>
                    <span class="counts"><a href="#">383万</a></span>
                </p>

                <p>
                    <span class="number">6</span>
                    <span class="new_title"><a href="#">杜海涛删除二手平台已售宝贝</a></span>
                    <span class="counts"><a href="#">369万</a></span>
                </p>

            </div>
        </div>
</div>
</body>
</html>