CSS盒子

最新推荐文章于 2020-10-17 15:15:15 发布

opo77_

最新推荐文章于 2020-10-17 15:15:15 发布

阅读量160

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/opo77_/article/details/105773072

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

CSS1


<p style="font-size: 16px;text-decoration: line-through">啦啦啦</p>
<p style="font-size: 100%;text-decoration: overline">啦啦啦</p>
<p style="font-size: 300%;font-weight: 900;font-style:initial;text-decoration: underline;text-align: center">芋头粉</p>
<p style="line-height: 1.6em;letter-spacing: 3em;">麻辣藕片</p>
<p style="line-height: 1.25em">麻辣鸭翅</p>
<h2 style="text-indent: 12px;text-shadow: 5px 3px 20px rebeccapurple;">可口可乐</h2>
<h2 style="text-shadow: 5px 3px 100px yellow">叫了个鸡</h2>
<!-- text shadow 阴影，向右 向下 清晰度  text indent 缩进 -->
<style>
    a:link{
        color:lightseagreen;
    }
    a:hover{
        color:maroon;
        text-decoration: underline;
    }
    a:active{
        color:pink;
    }
    a:visited{
        color:grey;
    }
</style>
<a href="https://movie.douban.com/subject/1291561/">dianying</a>
<!-- link 未访问颜色样式  hover鼠标悬停时  active  被点击时 visited 已被访问 伪类-->

<style>
    .center{
        text-align: center;
        font-weight: bolder;
    }
</style>
<p class="center">喜欢你</p>
<!-- 类选择器 -->

<style>
    .be:hover{
        background-color: navy;
    }
    .be:active{
        background-color: orange;
    }
</style>
<button class="be" type="button">搜索</button>
<style>
    .simplea{
        height: 80px;
       min-width: 100px;
       max-width: 700px;
        border: 1px solid black;
    }
</style>
<body>
    <div class="simplea">我是一个盒子</div>
</body>
<!-- 盒子模型 -->
<style>
    .simpleb{
        width: 80px;
        height: 30px;
        border:1px  black;
        border-style: dotted;
       /* dotted 一串方形点 dashed 一条虚线 double 两条实线 solid 一条实线  */
        overflow: hidden;
    }
</style>
<body>
    <div class="simpleb">我是另一个盒子</div>
</body>
<!-- 盒子太小隐藏用hidden -->


<style>
    .simplec {
        width: 600px;
        height: 300px;      
        border: 1px solid black;
        /* 边框实线黑色 依次分别是宽度样式颜色 */ 
        overflow: scroll;}
        /* 盒子太小还想被看到添加滚轴 */
</style>
<body>
<div class="simplec">
<pre>
Lemon Tree
    
I'm sitting here in the boring room.
It's just another rainy Sunday afternoon.
I'm wasting my time, I got nothing to do.
I'm hanging around, I'm waiting for you.
But nothing ever happens, and I wonder.
I'm driving around in my car.
I'm driving too fast, I'm driving too far.
I'd like to change my point of view.
I feel so lonely, I'm waiting for you.
But nothing ever happens, and I wonder.
I wonder how, I wonder why.
Yesterday you told me about the blue, blue sky.
And all that I can see is just a yellow lemon tree.
I'm turning my head up and down.I'm turning, turning, turning, turning, turning around.
And all that I can see is just another lemon tree.
And I wonder, wonder
I wonder how, I wonder why
Yesterday you told me about the blue blue sky
And all that I can see.
And all that I can see.
And all that I can see is just a yellow lemon tree.
</pre>    
</div>
</body>

效果为：
在这里插入图片描述
CSS2 （哈哈没有2）&3：

<style>
    p.example {
        width: 275px;
        border: 2px solid #0088dd;
        padding: 10px 50px 10px 1px;
    }
    /* 内边距上右下左 */
</style>

<body>
    <p class="example">狗（拉丁文Canis lupus familiaris）属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”，狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前~1.5万年前，发展至今日。被称为“人类最忠实的朋友”，现如今是饲养率最高的宠物。其寿命约十多年。在中国文化中，狗属于十二生肖之一，在十二生肖中的第11位。</p>
</body>

效果为：
在这里插入图片描述

<style>
    p {
        width: 275px;
        border: 2px solid #0088dd;
        padding: 10px 50px 10px 1px;
        background-color: burlywood;
    }
    
    p.example {
        margin: 10px;
    }
    /* 上下左右外边距都是10  如果写了三个就是上 左右 下 只写了两个就是上下 左右*/
</style>

<body>
    <p>狗（拉丁文Canis lupus familiaris）属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”，狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前~1.5万年前，发展至今日。被称为“人类最忠实的朋友”，现如今是饲养率最高的宠物。其寿命约十多年。在中国文化中，狗属于十二生肖之一，在十二生肖中的第11位。</p>
    <p class="example">狗（拉丁文Canis lupus familiaris）属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”，狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前~1.5万年前，发展至今日。被称为“人类最忠实的朋友”，现如今是饲养率最高的宠物。其寿命约十多年。在中国文化中，狗属于十二生肖之一，在十二生肖中的第11位。</p>
</body>

效果为：
在这里插入图片描述

<style>
    p {
        border: 2px solid #0088dd;
        height: 1000px;
        background-image: url('https://resource.bcgame-face2face.haorenao.cn//cxy/app/konan.jpeg');
        font-size: 70px;
        text-align: right;
        color: whitesmoke;
    }
</style>

<body>
    <p>真相只有一个</p>
</body>
<!-- 插入图像作为背景，要想看效果得分别看 -->

效果为：
在这里插入图片描述

<style>
    li {
        display: inline;
        margin: 10px;
    }
</style>
<!-- display：inline 使块级元素表现的像一个内联元素 -->
<!-- 导航栏 -->
<ul>
    <li>主页</li>
    <li>产品</li>
    <li>服务</li>
    <li>关于</li>
    <li>联系人</li>
</ul>

效果为：
在这里插入图片描述


<!-- display：block使内联元素表现得像块级元素 -->
<style>
    i{
        display:block
    }
</style>
<i>lol</i><i>lol</i>

效果为：
在这里插入图片描述

<!-- 隐藏盒子 -->
<style>
    li {
        display: inline;
        margin: 10px;
    }
    
    li.coming-soon {
        visibility: hidden;
        /* display: none; 连空白区域都不见了*/
    }
    /* 若把hidden更改为visible元素就出现了 */
</style>
<ul>
    <li>主页</li>
    <li>产品</li>
    <li class="coming-soon">服务</li>
    <!-- 隐藏了 -->
    <li>关于</li>
    <li>联系人</li>
</ul>

效果为：
在这里插入图片描述

<!-- 盒子的投影 -->
<style>
    p {
        width: 60px;
        box-shadow: 5px 5px 5px 50px #777777;
        /* 右 下 清晰度 投影面积 */
    }
</style>
<p>lol</p>

效果为：

在这里插入图片描述

<style>
    p {
        width: 60px;
        border-top-right-radius: 10px;
        /* 右上方的角 */
        /* border-radius: 左上，右上，右下，左下; */
        /* border-top-left-radius：80px（圆角横向的值） 20px（圆角纵向的值）； */
        border: 5px solid red;
    }
</style>
<p>lol</p>

效果为：
在这里插入图片描述

opo77_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子

CSS1<p style="font-size: 16px;text-decoration: line-through">啦啦啦</p><p style="font-size: 100%;text-decoration: overline">啦啦啦</p><p style="font-size: 300%;font-weight: 90...
复制链接

扫一扫