2024/9/11学校教的响应式前端能学到什么?

news2024/11/13 1:37:55

9.11

1)砌砖

确定整体框架,而不是想到一点写一点,类似盖大楼,不是想到哪盖到哪,先砌砖,再装修

砌砖前先划分好砌砖范围(初始化样式)

  • 清除body自带的内外边距
* {
margin: 0;
padding: 0;
}
  • 去掉li的小圆点
li {
list-style: none;
}
  • 取消a标签的下划线
a {
color: #666;
text-decoration: none;
}
  • 清除浮动

防止父容器高度塌陷,visibility隐藏。但还有高度,设置高度为0,

生产内容,伪元素正常显示,块级元素

.clearfix: after {
visibility: hidden;
clear: both;
display: block;
content: " .";
height: 0;
}
.clearfix {
*zoom: 1;
}
image-20240911091642746 image-20240911091725926
<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <header>
            <div><img src="images/logo.png" alt="">
                <h1>珠海市晖煌包装制品有限公司</h1>
            </div>
            <nav>
                <a href="index.html">首页</a>
                <a href="about.html">关于我们</a>
                <a href="custom.html">客户反馈</a>
                <a href="news.html">企业动态</a>
            </nav>
            <div>
                <img src="images/banner.jpg" alt="">
            </div>
        </header>
        <main>
            <aside>
                <h2>新闻中心</h2>
                <ul>
                    <li>电话:0756-1234567</li>
                    <li>船政:0756-7654321</li>
                    <li>黄生:13680361333</li>
                </ul>
                <div>
                    <img src="images/Mid3.gif" alt="">
                </div>
            </aside>
            <article>
                <h2>产品发布</h2>
                <figure>
                    <img src="./images/main1.gif" alt="">
                    <figcaption>产品1</figcaption>
                </figure>
                <figure>
                    <img src="./images/main2.gif" alt="">
                    <figcaption>产品2</figcaption>
                </figure>
                <figure>
                    <img src="./images/main3.gif" alt="">
                    <figcaption>产品3</figcaption>
                </figure>
            </article>
        </main>
        <footer>
            <span>版权所有©珠海市晖煌包装制品有限公司  传真:86-0756-66666 地址:中国广东省珠海市斗门区乾务镇富山工业区 邮箱:huihuang6666666@163.com  粤ICP备10049484号</span>
            <h1>陈子佳 22510206011</h1>
        </footer>
    </div>
</body>

</html>

2)装修

2.1)a标签状态高亮

a标签未激活状态

image-20240911101409098

a标签激活状态

image-20240911101639515

2.2)清除浮动

如果内部元素进行了float left,漂浮 如果父盒子不清楚浮动,那么后续的所有元素也会跟着漂浮。也就是影响后面所有的div漂浮,因此我们要清除浮动,增加伪类,clear:both

image-20240911105928701

image-20240911105938192

子元素有float,父盒子必清除,否则影响后面所有布局

2.3)整齐的表单使用table

外加列宽

列组包含多个col

<colgroup>
    <col style="width: 40%;">
    <col style="width: 60%;">
</colgroup>

效果

image-20240911115955771

3)静态页面开发流程

  • 拷贝页面,修改title
  • 整体框架不变,修改不同区域的类名,公共css继续装修

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2129305.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

H5接入Steam 获取用户数据案例 使用 OpenID 登录绑定公司APP账户 steam公开用户信息获取 steam webapi文档使用

官方文档地址 1.注册 Steam API Key&#xff1a; 你需要一个 Steam Web API Key&#xff0c;可以在 Steam API Key 页面 获取。https://steamcommunity.com/dev/apikey 这里开发做demo用自己steam账户的就好&#xff0c;后续上线要用公司的账户 2.使用 OpenID 登录&#xff…

【c++实现】统计上升四元组

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 &#x1f308;C专栏&#xff1a;C 文章目录 1. 题目描述2. 解释3. DP前缀和枚举 1. 题目描…

3.Kubernetes资源对象之pod

&#x1f482; 个人主页: Java程序鱼 &#x1f4ac; 如果文章对你有帮助&#xff0c;欢迎关注、点赞、收藏(一键三连)和订阅专栏 &#x1f464; 微信号&#xff1a;hzy1014211086&#xff0c;想加入技术交流群的小伙伴可以加我好友&#xff0c;群里会分享学习资料、学习方法…

经典蓝桥题目-------欧拉函数的应用

输入样例&#xff1a; 3 4 9 5 10 42 9999999967 输出样例&#xff1a; 6 1 9999999966 分析&#xff1a; 设 gcd(a,m) d,则 d|a,d|m 而 gcd(a,m) gcd(ax,m) 则有 d|x 根据题目有 0<x<m 同样的有 0< x < m (x,m是同时除以d的值) 于是我们发现只要求…

IPD变革之道内涵是什么?何以与人工智能新技术融合

集成产品开发&#xff08;Integrated ProductDevelopment&#xff0c;IPD&#xff09;引入我国20余年&#xff0c;从探索、扎根到管理驱动&#xff0c;逐渐成为国内企业长存发展之共识。回溯IPD的由来和发展&#xff0c;IPD变革之道内涵是什么&#xff1f;何以与人工智能新技术…

DNS查询报文分析

目录 1. 用 tcpdump工具监听抓包 2. 用 host 工具获取域名对应的IP地址 3. 分析DNS以太网查询数据帧 3.1 linux下查询DNS服务器IP地址 3.2 DNS以太网查询数据帧 &#xff08;1&#xff09;数据链路层 &#xff08;2&#xff09;网络层 &#xff08;3&#xff09;传输层…

如何禁止电脑上某个软件运行?3种管理小白必懂的方法,你学废了吗?

在日常使用电脑的过程中&#xff0c;我们有时会遇到需要阻止某些软件运行的情况。 无论是出于节省资源、提升系统性能&#xff0c;还是为了保护隐私安全&#xff0c;掌握基本的软件管理技能都是非常必要的。 下面&#xff0c;我们就来探讨三种简单易行的方法&#xff0c;即使…

【BFS专题】— BFS解决FloodFill算法

1、 图像渲染 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 代码&#xff1a; class Solution {int[] dx {0,0,1,-1};int[] dy {1,-1,0,0};public int[][] floodFill(int[][] image, int sr, int sc, int color) {//统计刚开始[sr,sc]坐标位置的颜色int prev …

C++当中的多态(三)

&#xff08;六&#xff09;虚表的本质 其实我们大家应该都已经猜到了&#xff1a;我们虚表的本质就是一个函数指针数组。通过访问这个函数指针数组就可以得到我们想要的虚函数的地址&#xff0c;之后通过这个地址就可以调用我们相应的虚函数。我们这个函数指针数组是以nullptr…

开发者的噩梦:如何在抄袭狂潮中杀出一条血路?

开发者的噩梦&#xff1a;如何在抄袭狂潮中杀出一条血路&#xff1f; 作为一个独立开发者&#xff0c;辛辛苦苦打磨出的产品&#xff0c;一旦被别人抄袭&#xff0c;心中往往会涌现出无数的愤怒与无奈。看到自己的创意被别人肆意剽窃&#xff0c;并以此获利&#xff0c;谁能不…

【HTML】Html标签

目录 结构盒子div 标签语义化标签 文本p 段落标签h 标题标签span 行内标签a 超链接标签br 换行标签、hr水平线标签sub 下标字、sup 上标字strong 或 b 加粗、em 或 i 斜体、del 或 s 删除线、ins 或 u 下划线 列表ul 无序列表ol 有序列表dl 自定义列表列表嵌套 表格table 标签合…

【Gateway】网关服务快速上手

微服务的接口都是直接对外暴露的,可以直接通过外部访问,为了保证对外服务的安全性服务端实现的微服务接口通常都带有一定的权限校验机制,由于使用了微服务,原本一个应用的的多个模块拆分成了多个应用,我们不得不实现多次校验逻辑,当这套逻辑需要修改时,我们需要修改多个应用,加…

【4.2】图搜索算法-DFS和BFS解单词拆分

一、题目 给定一个非空字符串 s 和一个包含非空单词的列表 wordDict&#xff0c;判定 s 是否可以被空格拆分 为一个或多个在字典中出现的单词。 说明&#xff1a; 拆分时可以重复使用字典中的单词。 你可以假设字典中没有重复的单词。 示例 1&#xff1a; 输入: s "le…

【2024-09-12】某极验4流程分析-滑块验证码

声明:该专栏涉及的所有案例均为学习使用,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!如有侵权,请私信联系本人删帖! 文章目录 一、前言二、流程分析三、参数分析三、代码一、前言 极验四代滑块没有了滑动轨迹的验证,来看一下 网址:aHR0cHM6Ly9n…

机器学习中的内存优化

随着机器学习模型的复杂性不断增加&#xff0c;内存使用量也随之增长&#xff0c;因此&#xff0c;内存优化变得尤为重要。 机器学习内存足迹 机器学习模型通常由数据结构如张量和矩阵组成。例如&#xff0c;一个形状为(1000, 1000)&#xff0c;每个元素为32位浮点数的二维张量…

TypeScript中 any和unknown 的区别

1、给其他变量赋值 any可以给其他类型的变量重新赋值&#xff1b; 但unknown是不行的&#xff0c;unknown 可以保持类型安全&#xff0c;从而减少潜在的错误&#xff1b; 2、使用类型上的方法 any可以用类型上的方法&#xff0c;unknown是不可以的

golang 字符串浅析

go的字符串是只读的 测试源代码 package mainimport ("fmt""unsafe" )func swap(x, y string) (string, string) {return y, x }func print_string(obj *string, msg string) {string_ptr : (*[2]uintptr)(unsafe.Pointer(obj))first_obj_addr : string_…

AI在医学领域:医学AI的安全与隐私全面概述

随着技术的进步&#xff0c;软件系统在商业产品中扮演着越来越重要的角色&#xff0c;并在医疗领域变得不可或缺。人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;的发展已经彻底改变了现代医疗系统&#xff0c;为通过病人诊断、监测和医疗保健研究收…

[机器学习]KNN算法

1 KNN算法简介 KNN算法思想&#xff1a;如果一个样本在特征空间中的K个最相似的样本中的大多数属于某一个类别&#xff0c;则该样本也属于这个类别。 K值过小&#xff1a;用较小领域中的训练实例进行预测。 容易受到异常点的影响K值的减小意味着整体模型变得复杂&#xff0c;容…

Tableau学习日记

Day1&#xff1a;Tableau简介、条形图与直方图 1.Tableau绘制条形图 1.1 条形图1&#xff1a;各地区酒店数量 1.2 条形图2&#xff1a;各地区酒店均价 1.3 堆积图&#xff1a;价格等级堆积图 2.Tableau绘制直方图 2.1创建评分直方图 Day2&#xff1a;Tableau简介、条形图与直…