HTML+css样式和案例笔记

最新推荐文章于 2024-06-12 10:36:38 发布

浅尝未止

最新推荐文章于 2024-06-12 10:36:38 发布

阅读量579

点赞数 1

文章标签： html css

本文链接：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;
}

浅尝未止

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML+css样式和案例笔记

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之间-bac
复制链接

扫一扫