css-常见的样式和案例

已于 2023-12-14 21:04:29 修改
阅读量94 收藏 1
点赞数
文章标签： html
于 2023-12-13 22:38:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyk666/article/details/134983740
版权

文章目录

选择器

类选择器
id选择器
标签选择器
属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
        #c2{
            color:gold;
        }
        table{
            color:pink;
        }
        input[type="text"]{
            border:1px solid deeppink;
        }
        .v1[xx="123"]{xuanz
            color: red;
        }
        .yy >a{
            color: deeppink;
        }
    </style>
</head>
<body>
    <div class="c1">
        中国
    </div>
    <div id="c2">
        广西
    </div>
    <div class="c1">
        联通
    </div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>ID</th>
                <th>ID</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1000</td>
                <td>1000</td>
                <td>1000</td>
                <td>1000</td>
            </tr>
            <tr>
                <td>1000</td>
                <td>1000</td>
                <td>1000</td>
                <td>1000</td>
            </tr>
        </tbody>
    </table>

    输入：<input type="text">
    输出：<input type="password" >

    <div class="v1" xx="123">x</div>
    <div class="v1" xx="456">y</div>
    <div class="v1" xx="789">z</div>

    <div class="yy">
        <a>百度</a>
        <div>
            <a>谷歌</a>
        </div>
        <ul>
            <li>美国</li>
            <li>美国</li>
            <li>美国</li>
        </ul>
    </div>

</body>
</html>

在这里插入图片描述

多个和覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color:green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

在这里插入图片描述

高度和宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 300px;
            width: 50%;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>
    <div>联通</div>
</body>
</html>

在这里插入图片描述

行内标签和块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            height: 100px;
            width:300px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
    <span class="c1">联通</span>
    <span class="c1">河北</span>
    <div style="display: inline">zhong国</div>
    <span style="display: block">zhong国</span>
</body>
</html>

在这里插入图片描述

字体设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: blue;
            font-size: 55px;
            /*font-weight: 600;*/
            font-family: 'Helvetica', sans-serif;
        }
        .c2{
            height:59px;
            width: 300px;
            border: 1px solid red;
            text-align: center;
            line-height: 59px;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div class="c2">中国移动</div>
</body>
</html>

在这里插入图片描述

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: #000;">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item" style="float: right"></div>

        <div style="clear: both"></div>
    </div>
    <div>haihds</div>
</body>
</html>

在这里插入图片描述

内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            padding: 20px 20px 20px 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="color: blue">听妈妈的话</div>
        <div>听妈妈的话</div>
    </div>
</body>
</html>

在这里插入图片描述

外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div style="height: 200px;background-color: blue"></div>
  <div style="height: 200px;background-color: red;margin-top:20px;"></div>
</body>
</html>

在这里插入图片描述

区域居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            width: 980px;
            background-color: pink;
            height: 1000px;
            margin: 0  auto;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

在这里插入图片描述

案例-小米商城

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
          margin: 0;
        }
        .header{
            /*height:38px;*/
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
        }
        .header .account{
            float: right;
            color: white;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a>小米商城</a>
                <a>小米商城</a>
                <a>小米商城</a>
                <a>小米商城</a>
            </div>
            <div class="account">
                <a>登录</a>
                <a>登录</a>
                <a>登录</a>
                <a>登录</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>

</body>
</html>

在这里插入图片描述

总结

去掉页面默认边距：

body{
	margin:0;
}

内容居中：
1.文本居中

<div style="width:200px;text-align:center;">吴佩其</div>

2.区域居中

.container{
	width:980px;
	margin:0 auto;
}
<div class="container">asdjhkahf</div>

如果存在float，在兄弟节点一定加入

<div style="clear:both"></div>
heibut不相信眼泪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
27 个 CSS 案例演示和 DEMO
2401_84092456的博客
04-12 646
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-hftjZxoy-1712861780221)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
CSS常见样式的介绍和使用（附加案例）
PIKapikaaaa的博客
03-21 6806
CSS常见样式的介绍和使用（附加案例） 选择器的理解与应用 常见样式 附加案例
css实例 css中id/class 详解样式表（外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解）[第一天]
PBitW的博客
08-03 9115
css实例 css中的id css中的class 样式表 外部样式表 内部样式表 内联样式 7种基础选择器 5种组合选择器 后代选择和子代选择注意 多重样式优先级 选择器错误理解
【CSS实例】
qll123的专栏
02-21 2586
学习目标： css样式学习、总结，知识巩固 学习内容： 在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。 目的就是巩固css的基础知识，防止遗忘 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、css画时钟 1、涉及到的css技术 利用css绘制圆形 .circle{ ...
常用css样式大全以及css属性代码大全
Java 技术专栏，从入门到精通，熟悉企业级开发
03-08 4610
常用css样式：字体属性、背景属性、区块属性、盒子属性、边框属性、列表属性、定位属性css属性：CSS文字属性、CSS边框空白、CSS符号属性、CSS背景样式、CSS连接属性、CSS框线一览表、CSS表单运用、CSS边界样式。
pink老师htmlcss学习 - 学成在线案例
03-26
"pink老师htmlcss学习 - 学成在线案例"这个资源包显然是一份用于教学或自我提升的学习材料，其中包含了一系列实例，帮助用户深入理解并掌握HTML和CSS的应用。 首先，`style.css`是CSS（层叠样式表）文件，它是用来...
头歌教学实践平台 Web前端开发基础 CSS-表格样式
01-20
"头歌教学实践平台"提供的"CSS——表格样式"课程，通过实际案例和练习，帮助学习者理解并运用上述知识点，提升Web前端开发技能。 总之，理解和掌握CSS在表格样式设计中的应用，对于构建美观且功能齐全的网页至关...
animate.css-uni-app动画样式文件
11-04
在这个特定的案例中，"animate.css-uni-app动画样式文件" 指的是将Animate.css库与uni-app框架结合使用的样式资源。uni-app是一个跨平台的前端开发框架，它允许开发者使用一套代码来构建iOS、Android、H5等多个平台...
awesome-css-learning：仅限于最佳CSS学习资源的小清单
01-31
以上只是部分CSS学习的关键知识点，实际资源清单可能会包含更多实践案例、教程、在线课程、书籍推荐等，以帮助学习者系统地掌握和提升CSS技能。通过这些资源，你不仅可以深入理解CSS，还能了解到最新的前端开发趋势...
CSS-Challenge
03-28
10. **CSS-in-JS**：这是一种将CSS样式直接写入JavaScript的新兴实践，通过库如styled-components或emotion提供组件级别的样式管理。 在【CSS-Challenge】项目中，开发者可以通过模仿现有的优秀设计、创建自己的...
css样式应用实例基础实例
09-27
css样式 index 样式应用css样式 index 样式应用基础的实力引用 实例
常用CSS样式大全（超全面）
热门推荐
zy1992As的博客
02-28 1万+
14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
CSS-200个小案例（一）
qq_55154022的博客
12-15 2957
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
css 的常用案例
gaodda的博客
10-29 1458
Css 的几个常用案例 1. css 编写三角形 2. css编写燕尾角 3. css编写多边形 4. css伪类的妙用 5. css浮动的清除 6. css响应式页面的编写 Created with Raphaël 2.2.0开始我的操作确认？结束yesno ...
CSS---‘样式’基础用法 与 案例
Memory_888的博客
12-23 811
CSS---‘样式’基础用法 ( 持续更新... )1、外部样式表，2、伪类选择器，3、css常用属性，4、显示省略号，5、样式清除，6、CSS三角形，7、CSS水平垂直居中，8、精灵图，9、宽高自适应，10、清除浮动，11、伪元素，12、CSS3---基础（层级选择器、怪异盒模型、渐变、过渡（transition）、2D（transform）、关键帧动画（animation）、3D、 网格布局（display：grid））
CSS 示例
Canyun3821的博客
06-24 487
CSS学习
css样式简单例子
panyaguang的博客
05-31 1373
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; h1{ color:#F00; font-size
CSS使用
LXMNIIT的专栏
05-07 421
css样式使用实例 //css样式的书写//元素ID#tb1{width:100%;height:80px;background-color:#FFD700;padding:4px;font-family:verdana,tahoma;font-weight:bold;}#tb2{width:100%;padding:4px;font-family:verdana,tahoma;margin:
postcss-pxtorem用法案例
最新发布
04-03
postcss-pxtorem是一个PostCSS插件，用于将像素单位换为rem单位。它可以帮助开发者在移动端开发中更方便地处理不同屏幕尺寸的适配问题。 使用postcss-pxtorem的步骤如下： 1. 首先，安装postcss-pxtorem插件。可以使用npm或者yarn进行安装。 2. 在项目的根目录下创建一个postcss.config.js文件，并在其中配置postcss-pxtorem插件。例如： ```javascript module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 设计稿宽度除以10，例如设计稿宽度为375px，则rootValue为37.5 propList: ['*'], // 需要转换的属性，这里设置为全部 }), ], }; ``` 3. 在项目的CSS文件中使用像素单位进行样式编写。例如： ```css .container { width: 375px; font-size: 14px; } ``` 4. 运行构建工具，例如webpack或者gulp，使postcss-pxtorem插件生效。插件会自动将像素单位转换为rem单位。例如： ```css .container { width: 23.4375rem; /* 375 / 16 = 23.4375 */ font-size: 0.875rem; /* 14 / 16 = 0.875 */ } ``` 这样，就可以实现根据设计稿宽度自动转换像素单位为rem单位，从而实现移动端适配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值