html+css,part 4

已于 2022-02-06 12:06:29 修改
阅读量79 收藏
点赞数 1
分类专栏： 笔记 文章标签： css html html5
于 2021-11-12 20:48:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Titijiang233/article/details/120475046
版权

圆角边框原理

 

 圆角边框的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yuan {
            width: 200px;
            height: 200px;
            background-color: rgb(255, 166, 166);
            /* border-radius: 100px; */
            /* 50%就是宽度和高度的一半 */
            border-radius: 50%;
        }

        .yj {
            width: 400px;
            height: 200px;
            background-color: rgb(255, 166, 166);
            border-radius: 100px;
        }

        .bt {
            width: 400px;
            height: 200px;
            background-color: pink;
            border-radius: 10px 40px 70px 100px;
        }
    </style>
</head>

<body>
    <h4>1.圆形的做法</h4>
    <div class="yuan"></div>
    <h4>2.圆角矩形的做法</h4>
    <div class="yj"></div>
    <h4>3.可以设置不同的角</h4>
    <div class="bt"></div>
</body>

</html>

 盒子阴影

 .box:hover {

            box-shadow: 10px 10px 10px 10px rgb(145, 144, 144);

        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 351px;
            height: 452px;
            background-color: #fff;
            /* 让块级盒子水平居中 */
            margin: 100px auto;
        }

        .name {
            /* padding: 0; */
            font-size: 17px;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .review {
            padding-top: 5px;
            color: #b0b0b0;
            font-size: 10px;
        }

        .v {
            padding-top: 27px;
        }

        .v span {
            color: #ff7f00;
            font-size: 14px;
        }

        .v h4 {
            display: inline-block;
            color: #b0b0b0;
            font-weight: 400;
            font-size: 14px;
        }

        em {
            font-style: normal;
            color: #ebe4e0;
            margin-left: 20px;
            margin-right: 7px;
        }

        .box:hover {
            box-shadow: 10px 10px 10px 10px rgb(145, 144, 144);
        }
    </style>
</head>

<body>
    <a href="#">
        <div class="box" align="center">
            <img src="images/手机.jpg" alt="">
            <p class="name">Xiaomi MIX 4</p>
            <div class="review">CPU全面屏</div>
            <div class="v">
                <h4>小米手机...</h4>
                <em>|</em>
                <span>4999元起</span>
            </div>
        </div>
    </a>
</body>

</html>

鼠标在图片上的阴影效果 

 文字阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: rgb(255, 136, 0);
            font-size: 50px;
            font-weight: 700;
            text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>你是阴影，我是火影</div>
</body>

</html>

 

 1.浮动

1.1传统网页布局的三种方式

1.2标准流（普通流/文档流） 1.3为什么需要浮动？

 

 1.4什么是浮动？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(224, 24, 24);
        }

        .right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: rgb(57, 255, 238);
        }
    </style>
</head>

<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>

</html>

 

1.5浮动特性（重难点）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: rgb(224, 24, 24);
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgb(57, 255, 238);
        }
    </style>
</head>

<body>
    <div class="box1">会浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

</html>

浮动练习1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1200px;
            height: 640px;
            background-color: rgb(255, 230, 0);
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 640px;
            background-color: rgb(30, 160, 138);
        }

        .right {
            float: right;
            width: 970px;
            height: 640px;
            background-color: rgb(221, 19, 80);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

 浮动布局练习2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: rgb(190, 236, 22);
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: rgb(231, 48, 48);
            float: left;
            margin-right: 14px;
        }
        /* 这里注意权重 */
        .box .last {
            margin-right: 0px;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>

</html>

 

浮动练习-手机模块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: rgb(231, 229, 67);
            margin: 0 auto;
        }

        .left {
            width: 234px;
            height: 615px;
            background-color: rgb(26, 207, 192);
            float: left;
        }

        .right {
            width: 992px;
            height: 615px;
            background-color: rgb(145, 216, 31);
            float: right;
        }

        .right>div {
            width: 234px;
            height: 300px;
            background-color: #fff;
            float: left;
            margin-left: 14px;
            margin-bottom: 14px;
            background-color: rgb(247, 255, 131);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html>

2.1常见网页布局

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 50px;
            background-color: rgb(180, 180, 180);
        }

        .banner {
            width: 980px;
            height: 95px;
            background-color: rgb(187, 184, 184);
            margin: 10px auto;
        }

        .box {
            width: 980px;
            height: 300px;
            background-color: rgb(155, 151, 151);
            margin: 10px auto;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: rgb(214, 55, 55);
            list-style: none;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0px;
        }

        /* 只要是通栏的盒子和浏览器一样宽，不需要指定宽度 */
        .fotter {
            height: 50px;
            background-color: rgb(170, 162, 162);
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
    </div>
    <div class="fotter">fotter</div>
</body>

</html>

清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
        }

        .damao {
            float: left;
            width: 200px;
            height: 300px;
            background-color: rgb(221, 68, 68);
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(46, 179, 172);
        }

        .footer {
            width: 500px;
            height: 200px;
            background-color: rgb(196, 53, 224);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
        }

        .damao {
            float: left;
            width: 200px;
            height: 300px;
            background-color: rgb(221, 68, 68);
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(46, 179, 172);
        }

        .footer {
            width: 800px;
            height: 200px;
            background-color: rgb(196, 53, 224);
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <--这个新增元素要求必须是块级元素，不能是行内元素-->
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: hidden;
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
        }

        .damao {
            float: left;
            width: 200px;
            height: 300px;
            background-color: rgb(221, 68, 68);
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(46, 179, 172);
        }

        .footer {
            width: 800px;
            height: 200px;
            background-color: rgb(196, 53, 224);
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
    </div>
    <div class="footer"></div>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /*IE6、7专有*/
            *zoom: 1;
        }

        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
        }

        .damao {
            float: left;
            width: 200px;
            height: 300px;
            background-color: rgb(221, 68, 68);
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(46, 179, 172);
        }

        .footer {
            width: 800px;
            height: 200px;
            background-color: rgb(196, 53, 224);
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
    </div>
    <div class="footer"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /*IE6、7专有*/
            *zoom: 1;
        }

        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid blue;
        }

        .damao {
            float: left;
            width: 200px;
            height: 300px;
            background-color: rgb(221, 68, 68);
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(46, 179, 172);
        }

        .footer {
            width: 800px;
            height: 200px;
            background-color: rgb(196, 53, 224);
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
    </div>
    <div class="footer"></div>
</body>

</html>

Titijiang233
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
网页结构（html+css)
qq_46127986的博客
01-11 668
居中固定宽度 网页结构图 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
HTML + CSS +JavaScript 实战小项目 【实现动画导航栏效果】
m0_72773837的博客
05-10 1095
HTML + CSS + JavaScript 小项目 实战
html+css+js之20个练手小项目（一）
热门推荐
qq_40312477的博客
11-07 1万+
html+css+js之20个练手小项目（一）——Hangman前言一、HTML二、CSS三、JS 前言 前端新手练习，记录不迷失。 主要练习html和CSS布局以及JS。 来源github，参考链接：使用html+css和纯js实现小项目 Hangman是一个单词拼写的小游戏，主要功能包括： （1）利用svg画小人图 （2）生成随机单词并展示 （3）单词正确与错误提醒 一、HTML HTML结构比较简单，主要使用了SVG构造小人。学习一下标签svg中的line,circle。 <!DOCTY
html+css实现常见的网页特效
戴翔的技术博客
10-09 2622
0. 效果预览 1. 文字遮罩 html <li class="big-grid havehover"> <a href=""> <div class="mask"> </div> <div class="circle"> <p> 城市 </p> <p> CityWalk </p> </div> <div class=
HTML+css制作简单游戏界面
qq_53541336的博客
08-31 3188
开学在即闲来无事在家做了一个简单的游戏开始界面，下面看看具体代码吧，其实非常的简单这里只用HTML和css做的静态页面。
HTML+CSS基础知识点(part10)
2201_75597173的博客
06-24 742
keyframes 动画名称 {from{ 开始位置 }to{ 结束 }@keyframes 动画名称 {0%55%....100%/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意*/
纯HTML+CSS实现3D炫酷魔方（相册）
weixin_51261234的博客
12-22 7174
文章目录引言：效果演示：正文：1.HTML部分CSS部分：part 1.我们先实现大盒子在页面垂直水平居中的效果：part 2.我们来设置第二大盒子，加旋转效果。part 3.将外部盒子形成正方形盒子；注意每个面在X,Y,Z轴上的旋转角度。part 3.外部六面悬浮效果：part 4.实现内部的魔方part 5.添加音乐part 6.结束展示：代码：闲聊： 注意：完整代码在本文的最后面，前面分散的代码是我的讲解部分，如果只想使用代码，可以直接到本文的最下面取。 引言： ​ 本周我们专业实训，实训的内容是h
HTML+CSS（part 2）
XSL_HR的博客
09-07 428
此blog是主要是对css重点知识的总结，由本人结合所学和笔记资料整理得出，欢迎交流，互相进步！
【web开发网页制作】Html+Css网页制作关于明星介绍王嘉尔（5页面）【附源码下载】
赏樱看雪撸代码
12-07 1691
期末作业网页制作练习，网页制作大作业，介绍人物网页制作，网页制作demo源代码，简单的网页制作，html+css多页面样例，原创网页制作源代码。
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
HTML网页设计
06-27 1097
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个人总结四、更多干货 一、网页介绍 1 网页简介：此作
HTML+css卷帘样式效果
11-19
HTML和CSS是网页设计的基础，其中CSS（层叠样式表）尤其重要，它负责定义页面的布局和样式。"HTML+css卷帘样式效果"是一个常见的动态效果，用于创造独特的用户体验，常见于网站的滑动展示或者动画效果中。这个效果...
跟我学HTML+CSS.part1
09-11
跟我学HTML+CSS 分卷1 目录 第一章 HTML的基本概念 1.1 什么是HTML 1.2 HTML的发展历史
跟我学HTML+CSS.part2
09-11
跟我学HTML+CSS 分卷2 目录 第一章 HTML的基本概念 1.1 什么是HTML 1.2 HTML的发展历史
part4-css-units:htmlcss
03-07
本文将深入探讨在HTMLCSS中常用的CSS单位及其应用。 1. 像素（px） 像素是最常见的CSS单位，它代表显示器上一个最小的可独立渲染的点。1像素通常等于屏幕上的一个点。在大多数情况下，像素是相对稳定的单位，常用于...
css+html.part3
12-26
这个是精通CSS之高级Web设计的书，个人感觉很好
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
最新发布
Chloeeeeeeee的博客
07-11 194
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 126
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
css 自定义变量 var()
Z_Wonderful的博客
07-10 171
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。
CSS的选择器、常用属性、盒子模型和定位
secret010的博客
07-08 439
CSS选择器：选择页面(文档)中对应的标签，并设置样式。
有四个类名叫part1-pic-bg的盒子。id分别是part1-iconinfo1，part1-iconinfo2，part1-iconinfo3，part1-iconinfo4，在这个大盒子里面分别有一个类名叫part1-iconinfo的小盒子，，id值分别叫part1-iconinfo1-content，part1-iconinfo2-content，part1-iconinfo3-content，part1-iconinfo4-content，最初类名叫part1-iconinfo的盒子是隐藏状态，当点击大盒子的时候，对应的显示各自的小盒子，再次点击任意地方可以隐藏小盒子的html，css，jquery代码
05-26
<div class="part1-iconinfo4" data-target="part1-iconinfo4-content">Icon Info 4 <div class="part1-iconinfo" id="part1-iconinfo1-content">Icon Info 1 Content <div class="part1-iconinfo" id="part1-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Titijiang233

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值