w3school html5 ---- html响应式设计

最新推荐文章于 2024-06-04 08:13:24 发布

执霜

最新推荐文章于 2024-06-04 08:13:24 发布

阅读量502

点赞数

分类专栏： web 文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_43156556/article/details/121317616

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html 响应式设计

1. 响应式设计

响应式Web设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页

2. 简单的响应式设计

1. 网页效果

在这里插入图片描述

2. 设计分析

文字部分

边框外的文字设定标题级别即可
边框内的文字有标题和普通文本

排版部分
本文的重点部分在于CSS排版，主要有以下几个关键部分

边框尺寸及如何显示
页边空白：边框之间的距离
内边距：边框与本文内容之间的距离

整合部分
整合部分主要是html文本与css排版的整合，用以下三个工具进行衔接

style 标签：设置排版的具体内容
div 标签：块级标签，用于组合html元素，便于排版
class 属性选择器：对元素分类，为元素的类定义CSS样式

3. 代码实现

文字部分–利用div组合框内元素

<div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
</div>

排版部分 – style 标签内的属性设置排版样式

<head>
    <meta charset="UTF-8">
    <title>13.响应式web设计</title>
    <style type="text/css">
        .city{
            float: left;
            margin: 5px;	/*margin 修改页边距*/
            padding: 15px;	/*padding 页边框与页面内容的距离*/
            width: 300px;
            height: 300px;
            border: 1px solid black;	/*边框的尺寸*/
        }
    </style>
</head>

在这里插入图片描述

整合部分—class 选择器

<!DOCTYPE html>
<html lang="en">
	<head>
	    <style type="text/css">
	        .city{
	        /*排版部分模块命名为 city .标识使用class选择器*/
	        ...
	        }
	    </style>
	</head>
	<body>
		...
		<div class="city">
		<!--选择相应的选择器标识的排版模块-->
			...
		</div>
	</body>
</html>

4. 补充相关知识点

元素 & 属性

元素：从开始标签到结束标签的所有代码
属性：属性为元素提供附加信息
属性例子
- <h1 align= "center">其中h1为元素，align为属性
- <table border="1">其中 table为元素，border为属性

div & span
大多数 html 元素被定义为块级元素或内联元素

块级元素(div)：在浏览器显示时，通常会以新行来开始和结束
- eg : <head>, <style>, <h1>, <p>, <table>, <tr>, <ul>, <div>
内联元素(span)：在显示时，通常不会以新行开始
- eg: <td>, <a>, <img>, <span>
<div>元素是块级元素，可视为容器用于组合其他 HTML 元素
- 与CSS结合使用，可用于对大的内容块设置样式属性
<span>元素是内联元素，可用作本文容器
- 与CSS结合使用，可用于为部分文本设置样式属性

class & id

html 中的 class 属性和 id 属性均可作为选择器
class 可视为 <div>元素，<span>元素的类属性
- 设置<div>元素的类，可以为相同的<div>元素设置相同的类
- 设置<span>元素的类，能够为相同的<span>元素设置相同的样式
class 选择器使用 “.” 标识，可以被多种元素使用
id 选择器使用 “#” 标识，仅可被一种元素使用

5. 整体代码实现

rwd.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13.响应式web设计</title>
    <style type="text/css">
        .city{
            /*排版部分模块命名为 city .标识使用class选择器*/
            float: left;
            margin: 5px;
            /*margin 修改页边距*/
            padding: 15px;
            /*padding 页边框与页面内容的距离*/
            width: 300px;
            height: 300px;
            /*边框的尺寸*/
            border: 1px solid black;
        }
    </style>
</head>
<body>
<!--RWD responsive web design 响应式web程序设计-->
<h3>W3Schools Demo</h3>
<h4>Resize this responsive page!</h4>
<div class="city">
    <!--选择相应的选择器标识的排版模块-->
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
</div>
<div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center
        of the Greater Tokyo Area, and the most
        populous metropolitan area in the world.
    </p>
</div>

</body>
</html>

layOut.cass

#header{
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
}

#leftSide{
    background-color: lightpink;
    height: 300px;
    width: 100px;
    float: left;
    padding: 5px;
}

#content{
    width: 350px;
    float: left;
    padding: 10px;
}

#bottom{
    background-color: black;
    color: white;
    clear: both;
    /*clear: both 作用是清除浮动，*/
    text-align: center;
    padding: 5px;
}

执霜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
w3school html5 ---- html响应式设计

html 响应式设计1. 响应式设计响应式Web设计（Responsive Web Design）RWD 能够以可变尺寸传递网页2. 简单的响应式设计1. 网页效果2. 设计分析文字部分边框外的文字设定标题级别即可边框内的文字有标题和普通文本排版部分本文的重点部分在于CSS排版，主要有以下几个关键部分边框尺寸及如何显示页边空白：边框之间的距离内边距：边框与本文内容之间的距离整合部分整合部分主要是html文本与css排版的整合，用以下三个工具进行衔接
复制链接

扫一扫