HTML+css样式和案例笔记

最新推荐文章于 2024-05-07 22:37:05 发布
最新推荐文章于 2024-05-07 22:37:05 发布
阅读量580 收藏 3
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46347674/article/details/107693485
版权

CSS3+HTML：实操练习
1、标签显示模式转换display
-块转行内：display:inline;
-转行内转块元素：display:block;
-转行内块元素：display:inline-block;
2、设置宽和高，如果是行内元素 不能直接设置宽和高 必须要转换为行内块元素
3、行高等于盒子的高度 就可以让单行文本垂直居中line-height:
4、背景半透明
-语法：background: rgba(0,0,0,0.3);
-最后一个参数是alpha透明度，取值范围0~1之间
-background-attachment 背景固定还是滚动 （scroll/fixed）
5、优先级
-权重计算公式
-权重叠加
-important 无穷大
-行内样式权重表示（1.0.0.0）
-id选择器（0.1.0.0）
-类选择器（0.0.1.0）
-元素选择器（0.0.0.1）
-通配符选择器（0.0.0.0）
6、盒子模型
-边框 border:
-border-style 边框样式
-border-color 边框颜色
-border-solid 单实线
-border-dashed 虚线
-border-dotted 点线
上边框
-border-top-style:样式；
-border-top-width:宽度；
_ border-top-color:颜色；
-border-top:宽度 样式 颜色；
下边框
-border-bottom-style:样式；
-border- bottom -width:宽度；

  • border- bottom -color:颜色；
    -border- bottom:宽度 样式 颜色；
    左边框
    -border-left-style:样式；
    -border- left -width:宽度；
  • border- left -color:颜色；
    -border- left:宽度 样式 颜色；
    右边框
    -border-right-style:样式；
    -border- right -width:宽度；
  • border- right -color:颜色；
    -border- right:宽度 样式 颜色；

块级盒子水平居中

-盒子必须有宽度
-左右外边距为auto
-常见三种写法：
1、margin-left：auto；margin-right：auto；
2、margin：auto；
3、margin：0 auto；
文字居中和盒子居中的区别：
文字居中 text-align：center；
盒子居中 左右margin：auto；
插入图片和背景图片区别
-插入图片 产品展示类 移动位置只能靠盒模型 padding margin
-背景图片 小图标背景，超大背景图片 靠background-position移动
清除元素默认的内外边距
*{
margin:0;
Padding:0
}
行内元素为了兼容性，只设置左右外边距，不设置上下外边距
相邻块元素垂直外边距的合并
-取两个值中的较大者，称为相邻块元素垂直外边距的合并（外边距塌陷）
盒子模型demo：

            <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            li{
                list-style: none;
            }
            .box{
                margin: 100px auto;
                width: 288px;
                height:198px;
                border: 1px solid #ccc;
                padding: 15px;
                background-color: antiquewhite;
            }

            .box h2{
                font-size: 18px;
                border-bottom: 1px solid #ccc;
                padding: 5px 0px;
                margin-bottom: 10px;
            }
            .box ul li {
                height: 30px;
                /* background-color: pink; */
                /* 虚线 */
                border-bottom: 1px dashed #ccc;
            }
            .box ul li a {
                color: #333333;
                font-size: 12px;
                /* 去掉下划线 */
                text-decoration: none;
            }
           
            .box ul li a:hover{
                text-decoration: underline;、//添加下划线
            }
        </style>
    
</head>
<body>
    <div class="box">
        <h2>莲，lay-z</h2>
        <ul>
            <li><a href="#">北京招聘网页设计师</a></li>
            <li><a href="#">体验生活</a></li>
            <li><a href="#">个人简历</a></li>
            <li><a href="#">个人生活</a></li>
            <li><a href="#">jQuery中的链式编程</a></li>
        </ul>
    </div>

圆角边框demo：

    /* 圆角边框 */
    div {
        width: 200px;
        height: 200px;
        background-color: burlywood;
        border-radius: 50%;

    }
    p {
        width: 100px;
        height:20px;
        background-color: chocolate;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
        border-radius: 10px;
    }
</style>
<div></div>
<p></p>

盒子阴影：

-Box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 （影子大小）影子颜色 内/外阴影
案列： div {
width: 200px;
height: 200px;
background-color: burlywood;
margin: 50px auto;
box-shadow: 0px 15px 30px rgba(0,0,0,0.1);
}
浮动盒子的案例：

    .one,
    .two,
    .three {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .one {
        float: left;
    }
    .two {
        background-color: purple;
        float: left;
    }
    .three {
        background-color: sandybrown;
        float: left;
    }

<div class="one"></div>
<div class="two"></div>

小米浮动盒子的案例：
{
margin: 0px;
padding: 0px;
}
/ 清除元素默认内外边距样式 /
.box{
width: 1226px;
height: 615px;
background-color: springgreen;
/ 块级元素居中 */
margin: auto;

}
.left {
width: 234px;
height: 615px;
background-color: violet;
float: left;
}
.right {
width:992px;
height: 615px;
background-color: skyblue;
float: right;
}
.right li {
float: left;
width: 234px;
height: 300px;
background-color: tomato;
margin-left: 14px;
margin-bottom: 14px;
}
li {
list-style: none;
}
html:

<!-- 浮动的元素互相贴靠一起的，但如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐 -->
<div class="box">
    <div class="left"></div>
    <ul class="right">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </div>
</div>

导航栏demo（主要练习浮动布局，鼠标经过变色，行内元素转为块元素）

css :
{
margin: 0px;
padding: 0px;
}
/ 清除元素默认内外边距样式 /
.banner{
width: 760px;
height: 150px;
background: url(images/1.jpg);
/ 块级元素居中 */
margin: auto;
}
.nav {
width: 760px;
height: 32px;
background-color: yellow;
margin: auto;

}
li {
list-style: none;/* 清除无序列表的圆点*/
}
/* 因为li让文字竖着显示，所以必须让给li添加浮动 */
.nav ul li {
float: left;
}
.nav ul li a {
display: block;/ 行内元素转为块元素/
width: 80px;
line-height: 32px;/文字水平居中/
height: 32px;
font-size: 14px;
color: #40510a;
text-align: center;/文字水平居中/
}
li a {
margin-left: 25px;
text-decoration: none;
}
a:hover{
background-color: wheat;
}
html:

<div class="banner">
    </div>
</div>
<div class="nav">
    <ul>
        <!-- 导航栏用li包含a -->
        <li><a href="#">网站首页</a></li>
        <li><a href="#">网站首页</a></li>
        <li><a href="#">网站首页</a></li>
        <li><a href="#">网站首页</a></li>
        <li><a href="#">网站首页</a></li>
        <li><a href="#">网站首页</a></li>
    </ul>
</div>

清除浮动的本质：
为了解决父级元素因为子级元素浮动引起内部高度为0的问题，清除浮动后父级会根据浮动的盒子自动检测高度，父级有了高度，就不会影响标准流
-Clear：属性值；
-Left 不允许左侧有浮动元素
-Right 不允许右侧有浮动元素
-Both 同时清除左右两侧浮动的影响
清除浮动的方法：
（1）额外标签法：

（2）父级添加overflow属性方法 overflow hidden (在css里)

清出浮动的总结：
父亲没有高度
子盒子浮动了
影响下面布局了，应该清出浮动
使用after伪元素清除浮动
.clearfix:after {
Content: “”;
Display: block;
Height: 0;
Visibility: hidden;
Clear: both;
}

  • .clearfix {
    *zoom: 1; /IE6,7专门清除浮动的样式/
    }

书写css标准规范：
1、布局定位属性：display/position/float/clear/overflow
2、自身属性：width/height/margin/padding/border/background
3、文本属性：color/font/text-align/break-word
4、其他属性：content/cursor/box-shadow/
表格制作demo

<table border="1" cellspacing="0" align="center" width="800px" height="800px">
   <tr>
     <td width="90px" height="50px">姓名</td>
     <td width="110px"></td>
     <td width="90px">性别</td>
     <td width="90px"></td>
     <td width="90px">出生年月</td>
     <td width="200px"></td>
     <td rowspan="3">照片</td>
   </tr>
   <tr width="90px" height="50px">
    <td>身份证号码</td>
    <td></td>
    <td>民族</td>
    <td></td>
    <td>政治面貌</td>
    <td></td>
  </tr>
  <tr width="90px" height="50px">
    <td>婚姻状况</td>
    <td></td>
    <td>健康状况</td>
    <td></td>
    <td>身高</td>
    <td></td>
  </tr>
  <tr width="90px" height="50px">
    <td>现户口所在地</td>
    <td></td>
    <td>所学专业</td>
    <td></td>
    <td>学历</td>
    <td colspan="2"></td>
  </tr>
  <tr width="90px" height="50px">
    <td>最后毕业学校</td>
    <td></td>
    <td>毕业时间</td>
    <td></td>
    <td>技术职称</td>
    <td colspan="2"></td>
  </tr>
  <trwidth="90px" height="50px">
    <td height="50"px>现工作单位</td>
    <td></td>
    <td>参加工作的时间</td>
    <td></td>
    <td>现从事专业</td>
    <td colspan="2"></td>
  </tr>
  <tr class="tll">
      <td rowspan="6" id=”tt”>主要简历</td>
      <td colspan="2">起止年月</td>
      <td colspan="2">在何单位</td>
      <td colspan="2">任何职位</td>
  </tr>
  <tr>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td>业务专长及工作成果</td>
    <td  colspan="6"></td> 
</tr>
<tr>
    <td>通讯地址</td>
    <td colspan="3"></td>
    <td>邮政编码</td>
    <td colspan="2"></td>
</tr>
<tr>
    <td>联系电话</td>
    <td colspan="3"></td>
    <td>Email地址</td>
    <td colspan="2"></td>
</tr>
</table>

补充让文字竖排显示：
#tt {
width: 50px;
font-size: 20px;
word-wrap: break-word;
letter-spacing: 50px;
}

浅尝未止
关注
html+css课程综合案例
skysys的研究小屋
02-06 483
素材 wget http://labfile.oss.aliyuncs.com/courses/1237/images.zip &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; ...
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4460
HTML/CSS笔记#自用#尚硅谷#李立超
制作一个简单HTML个人网页网页（HTML+CSS）web前端大作业
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
05-28 1万+
一个简单的HTML网页，非常适合网页设计html期末大作业 成品效果 代码实现 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;link rel="stylesheet" href="css/
html+css实例
weixin_34240520的博客
05-25 118
手机适配 问题:一个图片比较大或者比较小，怎么适配手机怎么优化? https://blog.csdn.net/rj_jqd/article/details/8651251 一个p标签，不换行，超出部分显示为省略号？ p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 如何找到所有 HTM...
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
html+css 案例
weixin_48494427的博客
03-05 225
&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; *{ margin: 0; padding: 0; } .box{ width: 1000px; height: 100px; margin: 0px 400px; .
黑马基础学习html+css课程笔记和案例
06-29
在“黑马基础学习html+css课程笔记和案例”中，你可能会看到如何将静态的HTML和CSS应用到实际的网页设计中，例如响应式布局的实现，使用Flexbox或Grid布局，以及如何使用CSS预处理器（如Sass、Less）提高代码的可...
传智播客-PHP基础视频_html+css+js笔记
07-24
它与HTML和CSS一起构成了Web开发的三大核心技术。JavaScript可以操作DOM（Document Object Model），改变HTML元素，响应用户事件，进行异步数据通信（Ajax）等。 【传智播客教学资源】 传智播客是一家知名的教育...
韩顺平轻松搞定网页设计html+(DIV+CSS)+javascript视频笔记(全).pdf
10-05
最后，JavaScript是增强网页交互性的关键，它可以动态改变HTML和CSS，处理用户输入，甚至与服务器进行通信。虽然案例中没有具体涉及JavaScript，但在实际网页设计中，我们可能用它来响应用户点击图片或表格单元格的...
HTML标签+CSS笔记
03-19
学习HTML和CSS是成为Web开发者的基础，通过案例和作业的实践，可以更好地理解和掌握这些知识，从而创建出美观、功能丰富的网页。在实际工作中，开发者通常会结合JavaScript和其他前端框架（如React、Vue、Angular等...
简单网页例子（html+jsp+css）
06-26
简单网页例子（html+jsp+css）
HTML+CSS经典案例
09-12
想学好这块的朋友，可以去看看，很适合初学者，希望对你 有所帮助
HTML+CSS案例
zcylxzyh的博客
01-30 1018
综合案例1、分析1.1 整体结构1.2 部分结构2、代码部分2.1 初始化_CSS2.2 头部2.2.1 头部_HTML2.2.2 头部_CSS2.3、中间轮播图2.3.1 中间轮播图_HTML2.3.2 中间轮播图_CSS2.4 精品推荐2.4.1 精品推荐_HTML2.4.2 精品推荐_CSS2.5 底部样式2.5.1 底部样式_HTML2.5.2 底部样式_CSS 这个文章主要是将前面学习的CSS和HTML进行一个串联。 最终样式： 图片和各种间距的测量采用photoshop。 1、分析 1.1
HTML+CSS项目案例
qq_52108058的博客
11-30 3788
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML+CSS之CSS案例大全
最新发布
weixin_62575733的博客
05-07 1003
CSS 1.体验css语法规范 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;
HTML+CSS小实战案例
热门推荐
Biexiansheng的博客
04-19 1万+
HTML+CSS小实战案例 登录界面的美化，综合最近所学进行练习 网页设计先布局，搭建好大框架，然后进行填充，完成页面布局 1 html> 2 head> 3 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 title>实验title> 5 style type=
HTML+CSS练习案例
weixin_53519274的博客
12-21 1010
这个小案例是我大一刚学前端的html+css的练习小案例，虽然简单，但是对于当时小白的自己，也是给了我很大的成就感的哈哈哈哈，现在记录一下（找了好久才找到的，呜呜呜）提示：以下是本篇文章正文内容，下面案例可供参考这个小案例是大一暑假学习练习的，时间已经很久了，适合小白练习。
html样式实例
weixin_45164123的博客
06-01 119
1，背景颜色 2，字体、颜色和尺寸 3，文本对齐
韩顺平div+css教程笔记：完整版
3. **CSS的快速体验案例**：在`test.html`中，`link`标签引入了一个外部样式表`my.css`，这样所有的样式定义都集中在这个单独的文件中，便于管理和更新。`my.css`中定义了`.style1`及其子元素的样式，使得表格被红色...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值