寒假第二周学习总结

最新推荐文章于 2023-06-30 01:48:10 发布

翔霖是真的

最新推荐文章于 2023-06-30 01:48:10 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/m0_52631763/article/details/113186009

版权

今天主要了解了css基础和样式

1.id属性只能在每个HTML中使用一次。
但当id选择器作为派生选择器时也可被使用多次：

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

即即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可被使用多次。
2.不可以在内联元素中嵌入段落元素。
3.text-indent属性实现首行缩进。
4.text-align规定元素中文本的水平对齐方式：左，右，居中。
vertical-align:垂直方向对齐：顶部，底部，居中。
5.word-spacing:单词间隔，letter-spacing:字母间隔。
6.text-transform:文本大小写，包括none,uppercase,lowercase,capitalize.
7.text-decoration:文本装饰，包括underline,overline,none,line-through,blink(文本闪烁）。
8.white-space:设置元素中的空白处理方式，即
值空白符换行符自动换行
pre-line 合并保留允许
normal 合并忽略允许
nowrap 合并忽略不允许
pre 保留保留不允许
pre-wrap 保留保留允许
9.direction定义文本方向。
10.list-style-type:列表项标志类型：

ul {list-style-type : square}

list-style-image:

li {list-style : url(example.gif) square inside}

今天学习了框模型和定位

overflow:scroll-使用滚动条显示溢出内容。
z-index：决定元素的优先级顺序，越小优先级越高。
absolute:绝对定位，相对于最近的已定位的元素定位，如果没有已定位的祖先元素，则相对于原始的包含块。
relative:相对定位，相对于初位置定位。
fixed:固定定位，相对于屏幕窗口定位。

今天学习了css高级和css选择器

1.first-line:向元素的第一行添加样式。
first-letter:首字母········
2.：before,: after-向元素的前后添加内容。
3.list-style-type:none-删除圆点，导航栏不需要列表项标记。
4.display:inline-规定为行内元素。不换行。水平导航栏：

li
{
display:inline;
}

5.垂直导航栏：


a
{
display:block;   /把链接显示为块元素使整个链接区域可点击，同时也允许我们规定宽度
width:60px;   /块元素默认占用全部可用宽度，我们需要规定60px的像素。
}

今天制作了一个页面模型

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        *{
            padding:0px;
            margin:0px;
        }
body{
    background-color: rgb(177, 181, 184);
}
.middle {
    text-align: center;
    padding-top: 10px;
    width: 570px;
    border: 1px solid white;
    margin: 0 auto;
    position: relative;
}
.head{
    margin-top: 10px;
    background-color: rgb(228, 87, 5);
    height: 50px;
    color:white;
}
.head .home{
    position: absolute;
    width: 570px;
    top: 72px;
}
.head .home>span{
    color: rgb(17, 58, 182);
    text-decoration-line: underline;
    font-size: 10px;
    padding: 10px;
}
.section {
    background-color: rgb(255, 65, 144);
    width: 400px;
    margin-top: 10px;
    font-weight: bolder;
    overflow: hidden;
} 
.section>P{
    color: black;
    padding: 10px 0 5px 0;
}
.section .article{
    padding: 5px;
    background-color: white;
    margin: 5px;
    position: relative;
}
.section .article>p{
    font-weight: bolder;
}
.section .article .aheader{
    height: 20px;
    background-color:  rgb(228, 87, 5);
    margin-top: 10px;
} 
.section .article .aheader>p{
    color: white;
    font-weight: bolder;
}
.section .article .aaside{
    padding: 25px;
    background-color: rgb(38, 82, 163);
    width: 150px;
    height: 110px;
    margin-top: 20px;
    margin-left: 220px;
    font-weight: bolder;
    font-size: 25px;
    box-sizing: border-box;
}
.middle .section .text{
    color: red;
    position: absolute;
    top: 75px;
    font-size: 10px;
    font-weight: 400;
    width: 220px;
    text-align: left;
}
.section .afooter{
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: rgb(83, 63, 168);
    color: white;
}


.right-section{
	position:absolute;
	top: 100px;
	right: 10px;
	width: 150px;
	height: 200px;
	background-color: #398a68;
}
.right-section p{
	position: absolute;
	height: 30px;
    font-size:20px;
    top: 10px;
    right: 35px;
    font-weight: bolder;
    
} 
.sideheader{
	position: absolute;
	font-size: 18px;
	width: 150px;
	height: 25px;
	background-color:#f40;
    color:white;
    top: 45px;
    font-weight: bolder;
}
.tip {
    position: absolute;
    left: 40px;
    top: 100px;
    font-size: 15px;
}
.tip li{
    text-align: left;
} 
.tip li>a{
    color: rgb(19, 49, 141);
}
.middle .article-footer{
    width: 570px;
    margin-bottom: 5px;
    background-color: rgb(46, 62, 112);
    color: white;
    margin-bottom: 5px;
    font-weight: bolder;
}
        </style>
    </head>
    <body>
        <div class="middle">
            <h4>body</h4>
            <header class="head">
                <h2>Header</h2>
                <div class="home">
                    <span>Home</span>
                    <span>One</span>
                    <span>Two</span>
                    <span>Three</span>
                </div>
            </header>
            <section class="section">
                <p>Section</p>
                <article class="article">
                    <p>article</p>
                    <div class="aheader">
                        <p>Article Header</p>
                    </div>
                    <div class="aaside">
                        Article
                        Aside
                    </div>
                    <p class="text">Without you?I'd be a soul without a purpose</p>
                    <div class="afooter">
                        Article Footer
                    </div>
                </article>
                <article class="article">
                    <p>article</p>
                    <div class="aheader">
                        <p>Article Header</p>
                    </div>
                    <div class="aaside">
                        Article
                        Aside
                    </div>
                    <p class="text">Without you?I'd be a soul without a purpose</p>
                    <div class="afooter">
                        Article Footer
                    </div>
                </article>
            </section>
            <div class="right-section">
                <p>Section</p>
                <div class="sideheader">
                    Siderbar Header  
                </div>
                <ul class="tip">
                    <li>
                        <a href="">April 2019</a>
                    </li>
                    <li>
                        <a href="">March 2019</a>
                    </li>
                    <li>
                        <a href="">February 2019</a>
                    </li>
                    <li>
                        <a href="">January 2019</a>
                    </li>
                </ul>
            </div>
            <div class="article-footer">
                Footer
            </div>
        </div>
    </body>
</html>

后记

浮动布局

浮动布局破坏了流式布局，块级元素使用float会并排显示。

特点：

1 破坏了流式结构 —在一个块级容器中（如div），如果它的子元素，都有浮动（比如 float），并且没有清除这个浮动，那么块级容器将会塌陷

2 块级元素浮动后具有包裹性 —如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可

3 行级元素浮动后变成了块级元素

4 浮动是半脱离：元素钻上去 但是文字还在原来位置 所以是半脱离
5 行内元素浮动会变为块元素

规则：

1 浮动元素的左（右）外边界不能超出其包含块的左（右）边界

2  一个浮动元素的顶端不能比父元素的内顶端更高

影响：

对父元素造成的塌陷
后面的兄弟元素重叠影响
元素浮动也会对它后面的元素造成影响 ：后面的元素会钻上去，但是文字不会，文字会形成字围效果

清除塌陷

1. 设置行高
2. overflow:hidden; //清除对父元素的影响 父元素样式添加
3. clear:both|left|right ; //清除兄弟元素之间的影响 受影响兄样式中添加。
 clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用

居中方案

 	text-align :center;
    margin:0px auto;
    heignt : 555px; ling-height: 555px; // 行高等于文本

翔霖是真的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
寒假第二周学习总结

重要知识点总结list-style-type:none-删除圆点，导航栏不需要列表项标记。display:inline-规定为行内元素。不换行。a{display:block; /把链接显示为块元素使整个链接区域可点击，同时也允许我们规定宽度width:60px; /块元素默认占用全部可用宽度，我们需要规定60px的像素。}...
复制链接

扫一扫