一个简单完整的网页

article/2025/10/9 8:33:04

 

获得源码链接,点击这里https://github.com/suviwang312/SimpleFullPage

网页头部+banner和信息部分+新闻部分+底部

一 头部

效果:

先对css进行初始化

分析:头部有一张图片和一个input输入框还有一个按钮+下面的通栏

因为用到左浮,右浮的地方不同我们可以写一个通类

这里的logo图片如果不定义宽高会影响下面的通栏的设置,影响其中的第一个为首的顺序无法对齐

二、通栏(宽度为适应屏幕所以是100%,不用设定了)

效果

分析:有一个ul里面有6个li,鼠标滑过的时候文字颜色改变(hover),ul在整个通栏nav中用一个nav-con这个命名的div包住,使其居中显示。

margin: 0 auto使nav-con居中。。。。。。。。

a链接是行内元素,设置宽高的时候要转成行内块 display: inline-block;  font:字体加粗,字体大小 /行高和字体高度相同的时候字体会居中显示

三、banner

效果:

四、信息公告

分析:整个部分有一部分文字(居中用一个盒子装),一部分图片(右边用一个盒子),这两个盒子分别左右浮动,调用fl,fr

五、新闻部分

效果:

分析:有三部分,我们大体用三个盒子,里面的内容

①图片+文字(上),还有正中间的图片+左右箭头的图片用(子绝父相)position

②图片+文字(上),列表项ul,li,border-bottom用dashed虚线,“致歉公告”单独设置样式

③图片+文字(上),也是列表项这个我用div包住,还有下面的p标签的段落

六、底部

效果

注意:这里在news的部分用到一个类来清除浮动,这样保证news部分和底部不发生重叠clearfix

首先dt和dd是放于dl标签内,标签dt与dd处于dl下相同级。也就是dt不能放入dd内,dd不能放入dt内。在dl下,dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

分析:有上下两部分,一个是dl dt dd设置列表的标题和虚线下的居中文字


http://chatgpt.dhexx.cn/article/NUswU6bQ.shtml

相关文章

【手把手】制作一个简单的HTML网页

前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转 新建一个html文件: 我要给body添加一些样式,就在head元素上挂载一个style元素。 然后,写样式表: 效…

HTML写一个简单网页

最近学习了一点HTML,闲来无事写个网页看看, 欢迎、改进、留言。 演示地点:跳转到演示地点 一、初始化页面 body,button,dd,dl, dt,form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,a,div,span {m…

HTML-01-最简单的网页

一、(1) 首先,新建一个文本文档 (2)完成后,在里面输入你想写入的内容 (3)最后,把文件拓展名改为html,更改之后,我们会发现文本图标会变成浏览器的…

如何用html制作一个简单的网页

哈喽,大家好!我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作,其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…

制作一个简单的网页(入门篇)

使用HTML和CSS来制作一个简单的网页 前言一、HTML1.1常见元素介绍1.2借助工具,浏览器开发者工具 二、实现个人名片1.基本框架2.使用CSS美化1.CSS书写位置1、以元素的style 属性来指定 (内联样式)2、以style 标签包裹 (内部样式&am…

一个简单的HTML网页

一个简单的HTML网页&#xff0c;这是朋友写的&#xff0c;里面没有什么内容的&#xff0c;和大家分享一下&#xff0c;不喜勿喷。 先看下效果图 这里的登录和注册都是没有实际功能的&#xff0c;只是一个样式 下面来看看代码 登录 <!DOCTYPE html> <html><h…

return的使用方法

这里是修真院前端小课堂&#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能&#xff0c;本篇分享的是&#xff1a; 【return的使用方法 】 今天给大家分享一下&am…

if中return的用法

C#编程中&#xff0c;在if语句中&#xff0c;使用return语句&#xff0c;用于退出该if语句所在类的所在方法。例如程序&#xff1a; namespace RETU {class Program{static void Main(string[] args){IFR ifr new IFR();ifr.Kan();//Console.Read();}}class IFR{public stati…

【Java SE】return的用法(快速扫盲)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 前言 1.定义 2.return的用法 3.break和retur…

python中 return 的用法

# 说明&#xff1a; 1&#xff0c;return 语句后面跟的表达式可以省略&#xff0c;省略后相当于 &#xff08;返回&#xff09;return None # 2&#xff0c;如果函数没有retur…

Java中return的两种用法

一、return语句总是用在方法中&#xff0c;有两个作用。 一个是返回方法指定类型的值&#xff08;这个值总是确定的&#xff09;。 一个是结束方法的执行&#xff08;仅仅一个return语句&#xff09;。 一般的就百是用在有反回值的方法中&#xff0c;用来返回方度法指定问类…

return的四种用法

return的四种用法 &#xff08;1&#xff09;return跳出函数 def num1():print(欢迎练习return !)print(hello!) num1() #跳出函数&#xff1a; def num1():print(欢迎练习return !)returnprint(hello!) num1()(2)return从函数返回一个值&#xff0c;并且这个值可以赋值给他变…

C语言中return的各种用法

按初学的理解&#xff0c;return的任务就是返回对应的参数&#xff0c;在外层函数中对这个参数做进一步处理。 实际上return的用法不只这些。 为调用的函数返回参数值 此类应用最为普遍&#xff0c;通常是在一个具有返回值的函数中&#xff0c;返回一个参数值&#xff0c;这个返…

个人公众号,多谢关注

个人公众号,多谢关注!

Java用BufferedImage处理图片实例

最近&#xff0c;项目中需要对图片进行处理。实现的方式当然有很多种&#xff0c;这里&#xff0c;我使用了Java的BufferedImage进行了实现。由于对图片的不熟悉&#xff0c;实现的时候费了点儿劲&#xff0c;这里记录一下&#xff0c;以备后用。 场景描述&#xff1a;其实问题…

彻底理解ThreadLocal、ITL、TTL

懒人改变了世界,简化了世界,却隐瞒了世界的真相. 大家好,今天跟大家剖析一下ThreadLocal. 文章目录 痛苦的回忆抛几个问题前奏铺垫正片详解 痛苦的回忆 不知道大家有没有面向JDBC编程的经历.如果有的话,可以回想一下那是一种怎样的体验;如果没有,也可以假装有这样的经历,然…

【转】线上内存溢出分析

状况描述&#xff1a; 最近项目新打的版本&#xff0c;过不了多长时间&#xff0c;项目就会挂掉。状况就是处于一种假死的状态。索引查询都很慢&#xff0c;几乎进行不了任何操作&#xff0c;慢慢卡死。 然后我们再发版时&#xff0c;只能基于之前打好的war包&#xff0c;替换或…

SQL Server数据库基础的级联删除、级联更新与三层架构之窥

一、定义&#xff1a; 级联删除是指删除包含主键值的行的操作&#xff0c;该值由其它表的现有行中的外键引用。在级联删除中&#xff0c;还删除其外键值引用删除的主键值的所有行。 级联更新是指更新主键值的操作&#xff0c;该值由其它表的现有行中的外键引用。在级联更新中&a…

正则表达式

正则表达式简介&#xff1a; 正则表达式是对字符串操作的一种逻辑公式&#xff0c;就是用事先定义好的一些特定字符、及这些特定字符的组合&#xff0c;组成一个“规则字符串”&#xff0c;这个“规则字符串”用来表达对字符串的一种过滤逻辑。   给定一个正则表达式和另一个…

SQL Server2005中触发器的运用

编写过存储过程的人&#xff0c;再编写触发器时会发现&#xff1a;他们的语法、格式是非常类似的。其实触发器就是一种特殊类型的存储过程。他们都是预编译的&#xff0c;在程序正式编译前就由编译器进行编译&#xff0c;存储在服务器端。 不过&#xff0c;触发器与一般的存储过…