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

最新推荐文章于 2024-11-10 16:58:16 发布

原创最新推荐文章于 2024-11-10 16:58:16 发布 · 650 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #html5 #css

web 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了响应式网页设计的基本概念，通过实例展示了如何利用HTML和CSS实现简单的响应式布局。内容包括文字和边框的样式设置，以及<div>和<style>标签的使用，同时探讨了class选择器的重要性和应用。此外，还提到了相关HTML元素如<h1>、<p>和<div>的属性，以及类与ID的选择器在网页样式控制中的作用。

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;
}