Romcere.
文章
20
分类
8
评论
1

响应式网页速成

| 技术分享 •
字数总计 9302 | 阅读时长 23分钟 | 阅读量 10

响应式网页速成

前言

学习此教程，推荐你先掌握：了解如何问AI问题；了解“网页”的基本含义；基本的F12工具使用；VS Code基本使用

响应式网页是什么？是指可以进行实时数据更新的网页

设计一个响应式网页，往往是采用Web前端三剑客：HTML+CSS+JavaScript

HTML是用来标记内容的（重在内容组织上）；CSS是用来修饰内容样式的（重在内容样式美化展示上）；JavaScript是用来做交互的

HTML

一、基本结构

<!--这是注释-->
<!--这一行代码，是声明网页是用什么版本的html写的-->
<!--HTML5-->
<!DOCTYPE html>
<!--html是网页的根元素，所有内容应该写在其中;lang用于指定网页内容的主要语言-->
<html lang="en">
    <!--head标签的内容不会呈现在页面中-->
    <head>
        <!--元数据，放入一些网页的基本信息-->
        <meta charset="utf-8">
        <!--网页的标题-->
		<title>HTML速成</title>
    </head>
    <body>
        <!--我们主要修改的内容就是这里-->
    </body>
</html>

二、基本概念

1.常见标签

绝大多数标签都会有结束标签，如；但有些特殊标签不需要结束标签(很少)，如

<body>
      <!--主要内容存放-->
    <main>
        <!--节标签-->
        <section>
            <h1></h1>
            <!--分隔区块-->
            <div>
                <img src="" alt="">
                <span></span>
                <p></p>
            </div>
            <div>
                <!--行-->
                <ul>
                    <!--列-->
                    <li>
                    	<a href=""></a>
                    </li>
                </ul>
                <!--有序列表-->
                <ol>
                    <!--列-->
                    <li>
                    	<a href=""></a>
                    </li>
                </ol>
            </div>
        </section>
        <section>
            <!--表单-->
            <form>

            </form>
        </section>
    </main>
    <!--页脚标签-->
    <footer>

    </footer>  
</body>

2.常见属性

<img src="" alt="">

这里的 src/alt ，被称为属性；其中放在对应的值

<div class="" id=""></div>
<a href="" title=""></a>

三、DLC学习

拓展标签

文本格式化标签：

点击查看；

展示表格：

<table>
  <thead>
    <tr>
      <!--默认加粗表头-->
      <th>id</th>
      <th>username</th>
      <th>password</th>
    </tr>
  </thead>
  <tbody>
    <!--行-->
    <tr>
      <td>1</td>
      <td>user1</td>
      <td>pwd1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>user2</td>
      <td>pwd2</td>
    </tr>
  </tbody>
</table>

提交表单：

<!--action：提交表单到哪里	method：提交的方式是什么-->
<form action="test.html" method="get">
    <!--与表单控件关联，for需与关联的控件id相同-->
	<label for="username">
        <!--name为提交时的字段名-->
        <input type="text" id="username" name="username" placeholder="请输入账号">
    </label>
    <!--type为类型，这里表示按钮的作用时提交表单-->
	<button type="submit" class="login-reg-button">登录</button>
</form>

CSS

一、基本结构

1、行内式：直接写在css中
<div style=""></div>
2、内嵌式：写在head标签中
<head>
  <style type="text/css">
       body, html{
            padding: 0;
            margin: 0;
            height: 100%;
            background-color: black;
            display: flex;
            flex-direction: column;  /* 创建了一个垂直的 Flex 容器 */
    	}
  </style>
</head>
3、外联式：写在.css文件中，在head标签中引用
<head>
    <!--rel表示链接的是css样式表，type表示链接的是文本内容，href表示链接的文件是什么-->
    <link rel="stylesheet" type="text/css" href="../HTML速成教学/style.css">
</head>
style.css：
    body, html{
                padding: 0;
                margin: 0;
                height: 100%;
                background-color: black;
                display: flex;
                flex-direction: column;  /* 创建了一个垂直的 Flex 容器 */
            }

二、基本概念

1.如何使用

/* 这是注释 */
/* 标签名 */
body{
      padding: 0;
      margin: 0;
}
/* 两个以上‘标签名/类/id’以逗号隔开，一同设置样式 */
body, main{xxxxx}
/* 类和ID */
<div class="main" id="main2">
<div class="main">
.main{xxx}
#main2{xxx}

class属性和 id属性的区别：

class可以为多个元素指定相同的类名

id一般是指定该元素的唯一标识

使用时，我们只需清楚如果这个 ‘元素/内容’ 只会使用一次，那么就用id设置它的css

2.常见属性

[演示 元素(->内容)和容器(->标签)]

/* 控制元素在页面上的显示方式 
	none为不显示 block为以块级元素显示 
	inline以内联元素显示，即不会在页面上占据整个行而是只占据所需的宽度 */
display:none/block/inline;
/* 元素的内外边距[演示内外边距] */
margin: auto;/* 外边距 auto可以使元素水平居中 */
padding: 10px;/* 内边距  10px表示该元素占用的大小 */
/* DLC 具体控制元素 */
margin: 0px 0px 0px 0px;/* 上 右 下 左 */
/* 元素的宽与高 */
width: 10px;
height: 10px;
/* DLC 百分比设置*/
max-width: 100%;
max-height: 100%;
/* 元素的风格 */
border: 10px;/* 元素边框大小 */
background-color: #EEEEEE;/* 元素背景颜色 */
/* 元素文字设置 */
font-family: Arial;/* 设置字体 */
font-size: 16px;/* 文字大小 */
font-weight: bold;/* 文字粗细 */
color: #000000;/* 文字颜色 */
/* 文字溢出处理 */
overflow: auto;/* 如果溢出会显示滚动条 */
white-space: nowrap; /* 防止文本换行 */
text-overflow: ellipsis;/* 截断溢出文本，并在末尾添加省略号 */

/* 元素定位 */
position: relative;/* 相对定位 会占据空间*/
position: absolute;/* 绝对定位 根据"relative"来定位 不占据空间 */
position: fixed;/* 固定定位 即便页面滚动，它还是会停留在相同的位置*/
/* 上 右 下 左 改变位置 */
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* DLC 其他控制位置*/
float: right;/* 容器向右侧移动 */
clear: left;

/* 提权 */
z-index:100;/* 设置元素的层叠级别(使用absolute时会用到) */
/* 属性值优先 */
color: yellow;
color: green !imporant;/* 优先使用green */

三、DLC学习

1.元素布局方式

disply:flex;  弹性盒子

参考教程：Flex 布局教程：语法篇

多数情况下你不需要自己去设计，只需要能把遇到的问题很好的描述给ai就行

2.伪元素

/* 鼠标悬停在a标签时 */
a:hover {
  color: #FF5733; /* 悬停时的文字颜色 */
  background-color: #EDEDED; /* 悬停时的背景颜色 */
  font-weight: bold; /* 悬停时的字体粗细 */
  text-decoration: underline; /* 悬停时添加下划线 */
}

3.CSS框架

推荐组件网站：Element

JavaScript

一、使用方式

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    	<main>
            <!--1.内嵌事件处理程序-->
            <button onclick="alert('我是内嵌事件处理程序')">
                点击这里1
            </button>
        	<button onclick="myFunction2()">
                点击这里2
            </button>
            <button onclick="myFunction3()">
                点击这里3
            </button>
        </main>
        <footer></footer>
        <!--2.内联脚本 放在这里-->
        <script>
        	function myFunction2() {
            	alert("我是内联脚本");
        	}
        </script>
        <!--3.外部脚本-->
         <script src="script.js"></script>
    </body>
</html>
script.js：
function myFunction2() {
          alert("我是外部脚本");
}

二、遇到需要JS处理的问题

1.找AI帮你写

2.使用”注释“标记出来，后续我来编写

分配任务

1、每人需做出一个页面

登录/注册页面：https://aixcoder.com/#/

2、画画

设计后台管理页面：UserMan

文章作者： Romcere.
本文链接：
版权声明： 本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Romcere.！
技术分享 速成
喜欢就支持一下吧