HTML5 - DIV+CSS完成首页布局

最新推荐文章于 2023-03-30 11:11:43 发布

fpch2008

最新推荐文章于 2023-03-30 11:11:43 发布

阅读量832

点赞数

分类专栏： html div css

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

div

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

1.HTML的块标签

: 默认一个DIV独占一行
:默认在同一行

1.1CSS的概述

层叠样式表
美化HTML
HTML相当于网站的骨架
CSS对骨架进行美化
1.1.1CSS的基础语法
CSS的基本语法通常包含两个部分：一个是选择器，一个声明。
选择器{属性：属性值；属性：属性值。。。}
CSS的引入方式

行内样式：直接在HTML的元素上使用style属性的css。

Title
页面内样式：在HTML的标签中，

 <style>
            h1{
                color: red;
                font-size: larger;
            }
        </style>
        <h1>TITLE1</h1>
 
 1
2
3
4
5
6
7

3. 外部样式：单独顶一个.css文件
 <link href="demo1.css" rel="stylesheet" type="text/css" /> 

 
 1
2

1.2CSS的选择器

元素选择器

<style>
            div{
                border: 1px solid blue;
                width: 40px;
                height: 45px;
            }
        </style>
 
 1
2
3
4
5
6
7

ID选择器

    #d1{
                border: 2px solid orange;
                width: 30px;
                height: 55px;
            }
        </style>
    </head>
    <body>
        <div id="d1">DIV1</div>
 
 1
2
3
4
5
6
7
8
9

3.类选择器

.divClass{
                border: 2px solid paleturquoise;
            }

<div class="divClass">DIV4</div>
<div class="divClass">DIV5</div>
 
 1
2
3
4
5
6

4.CSS的浮动
Float属性的取值:
Left：
Right：
清除浮动效果：使用Clear效果

<style>
            div{
                border: 1px solid blueviolet;
                width: 200px;
                height: 220px;
            }
            #d1{
                float: right;
            }
            #d2{
                float: right;
            }
            #d3{
                float: right;
            }
            .clear{
                clear: both;
            }


        </style>
    </head>
    <body>
        <div id = "d1">DIV1</div>
        <div id = "d2">DIV2</div>
        <div id = "d3">DIV3</div>
        <div class="clear"> </div>
        <div id = "d4">DIV4</div>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

5.CSS的其他选择器
属性选择器：

<style>
            input[type = "text"]{
                background-color: red;
            }
        </style>
 
 1
2
3
4
5

6.CSS样式总结

背景
文本
字体
列表
####1.7CSS的伪类
a:link{color：#FF0000}
a:visited{color：#00FF00}
a:hover{color：#FF00FF}
a:active{color：#0000FF}

				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>

fpch2008

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 - DIV+CSS完成首页布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wangchunyang51/article/details/74840249 1.HTML的块标签 : 默认一个DIV独占一行:默认在同一行1.1CSS...
复制链接

扫一扫