学成在线案例

1,CSS属性书写顺序

建议遵循以下顺序:

1,布局定位属性:

display / position / float / clear / visbility / overflow (建议display第一个写,关系到模式)

2,自身属性:

width / height / margin / padding / border / background

3,文本属性:

color / font / text-decoration / text-align / vertical-align / white-space / break-word

4,其他属性(CSS3):

content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

2,页面布局整体思路

为了提高网页制作的效率,布局时通常有以下的整体思路:

1,必须确定页面的版心(可视区),我们测量可得知

2,分析页面中的行模块,以及每个行模块中的列模块,页面布局第一准则

3,一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则

4,制作HTML结构,还是遵循,先有结构,后有样式的原则。结构永远最重要

5,所以,先理清楚布局结构,再写代码尤为重要,这需要我们多写多积累

3,确定版心

.w{

        width:1200px;

        margin: 0  auto;

}

 4,头部制作

1号盒子是版心盒子header 1200*42的盒子水平居中对齐,上下给一个margin值就可以

版心盒子里面包含2号盒子logo

版心盒子里面包含3号盒子nav导航栏

版心盒子里面包含4号盒子search搜索框

版心盒子里面包含5号盒子user个人信息

注意:要求里面的4个盒子必须都是浮动

导航栏注意点:

实际开发中,我们不会直接用链接a,而是用li包含链接(li + a)的做法

1,li + a语义更清晰,一看这就是有条理的列表型内容

2,如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险),从而影响网站排名

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

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

相关文章

二维相位展开问题(讨论针对不连续相位展开算法鲁棒性)

作者:Munther Gdeisat博士和Francis Lilley博士 先决条件:为了理解本教程,在阅读本文档之前,您必须已经学习并完成“一维相位展开问题”教程。 有许多应用程序可以生成包裹的相位图像。例如合成孔径雷达(SAR&#xf…

FreeRTOS之列表及列表项实验(基于stm32f103c8t6)

B站正点原子视频链接: 第23讲 列表项的插入和删除实验_哔哩哔哩_bilibili #include "sys.h" #include "delay.h" #include "usart.h" #include "led.h" #include "FreeRTOS.h" #include "task.h" #in…

Android开发——activity类中的回调方法中的7个生存期

1、onCreate() 这个方法在每个活动中都能进行重写,他会活动在第一次被创建的时候调用。在这个方法中完成活动的初始化操作,如:加载布局、绑定事件等 2、onStart() 这个方法在活动由不可见变为可见的时候调用 3、onResume() 这个方法在活动中准…

大创项目推荐 深度学习 机器视觉 人脸识别系统 - opencv python

文章目录 0 前言1 机器学习-人脸识别过程人脸检测人脸对其人脸特征向量化人脸识别 2 深度学习-人脸识别过程人脸检测人脸识别Metric Larning 3 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习 机器视觉 人脸识别系统 该项目…

Mybatis练习

文章目录 配置文件实现CRUD环境准备查询所有数据编写接口方法编写SQL语句编写测试方法起别名解决上述问题使用resultMap解决上述问题小结 查询详情编写接口方法编写SQL语句编写测试方法参数占位符parameterType使用SQL语句中特殊字段处理 多条件查询编写接口方法编写SQL语句编写…

【EI会议征稿】2024年生成式人工智能与信息安全国际学术会议(GAIIS 2024)

2024年生成式人工智能与信息安全国际学术会议(GAIIS 2024) 2024 International Conference on Generative Artificial Intelligence and Information Security 2024年生成式人工智能与信息安全国际学术会议(GAIIS 2024)将于 202…

技术人的年终总结报告,请笑纳

背景 年底了,部门间,小组间不可避免的需要写年终总结报告。我相信很多朋友这件事肯定比较反感。认为这些东西都是表面形式,没有任何意义;亦或对于专心搞开发的人,对于这种报告并不擅长,不知道如何下手&…

Jackson 注解及配置大全

Jackson JSON 框架中包含了大量的注解来让我们可以干预 Jackson 的 JSON 处理过程, 例如我们可以通过注解指定 java pojo 的某些属性在生成 json 时被忽略。。本文主要介绍如何使用 Jackson 提供的注解。 Jackson注解主要分成三类,一是只在序列化时生效的…

Guava自加载缓存LoadingCache使用指南

第1章:引言 大家好,我是小黑,今天我们来聊聊缓存。在Java世界里,高效的缓存机制对于提升应用性能、降低数据库负担至关重要。想象一下,如果每次数据请求都要跑到数据库里取,那服务器岂不是要累趴了&#x…

js禁止打开控制台,如何强行打开控制台?

当我在查看某个网站的源码时,按F12会跳转到百度页面,或者先打开F12再输入网站也会进入到百度首页。 首先我们要关闭控制台进入到这个网站的首页,然后右键查 看网站的源码。 1.找到这个js文件,点进去。 2.点击这个js文件之后&a…

鸿蒙崛起了,再不加入恐怕要错过下个时代了

在华为9月25日的发布会上,余承东宣布“全新鸿蒙HarmonyOS NEXT蓄势待发,鸿蒙原生应用全面启动”,可以说一石激起千层浪。华为毅然决然的迈出了全新的一步,鸿蒙原生应用的全面启动,让人感觉又要有什么大事发生&#xff…

面试手写代码总结

★★★手写代码:实现forEach map filter reduce // 1. ------_forEach--------// Array.prototype.forEach() 方法对数组的每个元素执行一次给定的函数。// arr.forEach(callback(currentValue [, index [, array]])[, thisArg])Array.prototype._forEach functio…

TIDB7.5LTS集群安装配置手册

简介 因近期有一个项目需要上线,在评估使用什么架构时,和开发同仁沟通需求,了解到该应用为OLTP但是数据量很集中,会有几张超大的表,如果要保证事务效率,使用mysql集群难免会要做分库分表,对后期的运维带来很大的挑战;而TIDB属于分布式集群,TIKV的行存模式非常适用于大…

微信小程序管理奖品(抽奖)

话不多说直接上代码 功能&#xff1a; 使用微信小程序vant-weapp 组件库中的upload组件以及两个input框 最后拿到的值是一个数组对象的形式 主要代码如下&#xff1a; wxml <view wx:for"{{prizes}}" wx:key"index" class"inputs"><i…

【算法刷题】Day21

1. 【模板】前缀和 原题链接 题干&#xff1a; 给定一个长度为 n 的数组 有 q 次查询&#xff0c;每次有两个参数 l 和 r 算法原理&#xff1a; 1. 暴力解法 &#xff08;模拟&#xff09; 这个时间复杂度是 O(n) 2. 前缀和&#xff08;快速求出数组中某一个连续区间的和&…

Docker+PXC+Haproxy搭建高可用MySQL集群

搭建 本次搭建集群环境以5节点MySQL为例 1、安装pxc镜像 拉取pxc镜像 docker pull percona/percona-xtradb-cluster 镜像名称太长&#xff0c;修改一下&#xff1a; docker tag percona/percona-xtradb-cluster pxc 删除之前的&#xff1a; docker rmi percona/percona-xtr…

DOM是什么?

1、概述 &#xff08;1&#xff09;DOM代表文档对象模型&#xff0c;是 HTML 和 XML 文档的接口&#xff08;API&#xff09; &#xff08;2&#xff09;当浏览器第一次读取&#xff08;解析&#xff09;HTML文档时&#xff0c;会创建一个基于 HTML 文档的大对象&#xff0c;…

SpringBoot操作Redis缓存

SpringBoot操作Redis缓存 Redis有很多使用场景&#xff0c;一个使用场景就是缓存数据库的数据。Redis作为一个内存数据库&#xff0c;存取数据的速度比传 统的数据库快得多。使用Redis缓存数据库数据&#xff0c;可以减轻系统对数据库的访问压力&#xff0c;及加快查询效率等…

听GPT 讲Rust源代码--src/tools(15)

File: rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs 在Rust源代码中&#xff0c;rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs文件的作用是实现了一个能够将输入的文本映射为标记的结构。具体来说&#xff0c;它定义和实现了几个结构体&#xff08…

【已解决】Mysql在更新的时候,需要更新的字段是其他表查询的值,这个时候update语句怎么写

Mysql在更新的时候,需要更新的字段是其他表查询的值&#xff0c;这个时候update语句怎么写&#xff1f; 例如&#xff1a;我想要更新A表中的floor字段。但是这个字段的是是根据条件在B表中查询后&#xff0c;得到的值。 这样需求的sql语句怎么写 &#xff1f; 要点&#xff…