当前位置: 开发笔记 > 编程语言 > 正文

hbuilderx2.9.8公用css样式_HTML、css项目上手练习

作者：海容天色2602905655 | 来源：互联网 | 2023-09-10 11:00

根据下边的效果图完成一个完整网页的制作1、新建项目（1）打开HBuilderX新建一个项目（2）在index.html文件中

根据下边的效果图完成一个完整网页的制作

1、新建项目

&＃xff08;1&＃xff09;打开HBuilderX新建一个项目

&＃xff08;2&＃xff09;在index.html文件中添加网页标题&＃xff1a;音乐--和谐现场

效果&＃xff1a;

2、新建CSS文件

在css文件夹中新建CSS文件&＃xff0c;命名main.css

在main.css中添加代码&＃xff1a;body{margin: 0;}&＃xff0c;设置网页与浏览器四周距离为0。也可以在index.html文件中添加&＃xff0c;如&＃xff1a;

在index.html文件中引入css&＃xff1a;

3、布局

&＃xff08;1&＃xff09;最外面制作一个总框
在index.html文件中添加&＃xff1a;

main.css文件中添加css样式

.main{width: 1500px;margin: 0 auto;border:1px solid dodgerblue; }

注&＃xff1a;如果

里面是class&＃61;"main"&＃xff0c;css文件里面就写.main{}&＃xff0c;如果是id&＃61;"main"&＃xff0c;css文件里面就写#main{}

现在里面还没有内容&＃xff0c;也没有设置这个框的高度&＃xff0c;所以运行出来是下面这样的&＃xff1a;

&＃xff08;2&＃xff09;总框中分出头部、中部、尾部

在index.html文件

中添加&＃xff1a;

main.css文件中添加css样式&＃xff1a;

.tou{margin-top: 0px;width: 1500px;height: 780px;background-image: url(../images/banner4.jpg);background-repeat:no-repeat ;border:1px solid red; }.zhong{margin: 70px 100px;border:1px solid red; }.wei{width: 1500px;height: 510px;margin: 0 auto;background-image: url(../images/bgc.png);background-repeat:no-repeat ;background-size:100%; border:1px solid red; }

效果&＃xff1a;

先将所需要的图片引入images文件夹中

4、头部的制作&＃xff1a;

&＃xff08;1&＃xff09;制作#tou外盒子效果&＃xff1b;&＃xff08;前面已经弄好了&＃xff09;

&＃xff08;2&＃xff09;制作#tou1内盒子1效果&＃xff1a;包括导航与logo&＃xff1b;

在index.html文件

中添加&＃xff1a;

首页
关于我们
简介
团队
项目
联系我们

天堂鸟

Bird of Paradise

css样式&＃xff1a;

.tou1{margin-left:70px;margin-right: 70px;margin-top: 50px;height: 100px;border:2px solid red; } .menu{width: 800px;height: 40px;margin-left: 80px;margin-top: 50px;float: left;color: aliceblue;}.menu ul{margin: 0;padding: 0;}.menu ul li{font-size:20px;font-weight: bold;float: left;width: 130px;height: 40px;text-align: center;list-style: none;line-height: 40px;}.menu ul li a:link{font-size:20px;font-weight: bold;color: aliceblue;}.menu ul li a:visited{text-decoration: none;color: aliceblue;}.menu ul li a:hover{font-size: 25px;display: block;color: aliceblue;}.menu ul li a:active{text-decoration: none;color: aliceblue;} .logo1{float: right;margin-right: 60px;margin-top: 40px;height: 100px; }

&＃xff08;3&＃xff09;制作#tou2内盒子效果&＃xff1a;包括标题与段落文字&＃xff1b;

在index.html文件

下面添加&＃xff1a;

震 撼 来 袭来 自 心 灵 深 处&＃xff0c; 无 限 激 情 &＃xff01;
F r o m    d e e p    h e a r t ,    i n f i n i t e    p a s s i o n   !

css样式&＃xff1a;

.tou2{height: 440px;width: 1400px;margin: 0 auto;margin-left: 80px;margin-top: 450px; }

5、中部的制作&＃xff1a;

&＃xff08;1&＃xff09;制作#zhong外盒子的效果&＃xff0c;居中&＃xff1b;&＃xff08;前面已经弄好了&＃xff09;

&＃xff08;2&＃xff09;制作#zhong1内盒子1的效果&＃xff0c;标题与段落&＃xff1b;

在index.html文件

中添加&＃xff1a;

我的团队

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

css样式&＃xff1a;

.zhong1{margin: 10px 100px; } .line{width: 120px;border-bottom: 3px solid #1E90FF;font-size: 20px;font-weight: bold; }

&＃xff08;3&＃xff09;制作#zhong2内盒子2的效果&＃xff0c;包括四个小盒子内容&＃xff0c;每个小盒子又包括图片&＃xff0c;标题两个内容。

这个我用表格做&＃xff0c;用
也可以&＃xff0c;但是那样要达到要求的效果有点困难

在index.html文件

下添加&＃xff1a;

Elizabeth	Max Payne	Diana	Johnny Blaz

6、尾部的制作&＃xff1a;

&＃xff08;1&＃xff09;制作#wei外盒子的效果&＃xff1b;&＃xff08;前面已经弄好了&＃xff09;

&＃xff08;2&＃xff09;制作#wei1内盒子1的效果&＃xff0c;包括段落与span标记&＃xff1b;

在index.html文件

中添加&＃xff1a;

让你自己可以&＃xff0c;订阅我们  Make Yourself Available, Subscribe To Us

css样式&＃xff1a;

.wei1{margin: 0 auto;margin-left: 90px;margin-top: 20px;width: 1420px;float: left; }

&＃xff08;3&＃xff09;制作#wei2内盒子2的效果&＃xff0c;包括3个小盒子内容&＃xff0c;每个小盒子又包括标题&＃xff0c;段落两个内容&＃xff0c;最下方是一条直线与段落。

在index.html文件

下面添加&＃xff1a;

关于我们

Lorem Ipsum is simply dummy text of the 
printing and typesetting industry. Lorem 
Ipsum has been the industry&＃39;s standard 
dummy text ever since the 1500s.

 顾客服务

Lorem Ipsum is simply dummy text of the 
printing and typesetting industry. Lorem 
Ipsum has been the industry&＃39;s standard 
dummy text ever since the 1500s.

联系我们

VISIT US
MAIL US
CALL US

css样式&＃xff1a;

.wei2{margin-top: 20px;margin-left: 90px;height: 450px;float: left;width: 1320px; } .block{width: 30%;height:200px;margin-left: 35px;float: left; } .shang{width: 1320px;height: 260px;margin-top: 70px; }

最后&＃xff0c;将css样式里面的红边框代码border:1px solid red;去除&＃xff0c;就成功了。其中.tou{}去掉红边框后将margin-top: 0px;改为margin-top: -50px;

最终效果&＃xff1a;

推荐阅读

int
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
int
微软头条实习生分享深度学习自学指南

本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]

蜡笔小新 2023-12-14 20:58:32
const
Open judge C16H: Magical Balls 快速幂+逆元问题解析

本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]

蜡笔小新 2023-12-14 12:03:27
int
也就是|小窗_卷积的特征提取与参数计算

篇首语：本文由编程笔记#小编为大家整理，主要介绍了卷积的特征提取与参数计算相关的知识，希望对你有一定的参考价值。Dense和Conv2D根本区别在于，Den ... [详细]

蜡笔小新 2023-12-13 12:59:48
int
Python瓦片图下载、合并、绘图、标记的代码示例

本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]

蜡笔小新 2023-12-13 12:14:55
rsa
【机器学习】生成式对抗网络模型综述

生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型，可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]

蜡笔小新 2023-12-14 17:51:18
int
PHP图片截取方法及应用实例

本文介绍了使用PHP动态切割JPEG图片的方法，并提供了应用实例，包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用，以及图片切割的具体步骤。同时，还提供了一些注意事项和优化建议。通过本文的学习，读者可以掌握PHP图片截取的技巧，实现自己的需求。 ... [详细]

蜡笔小新 2023-12-14 16:44:09
int
C++省略号类型和参数个数不确定函数参数范例

本文介绍了C++中省略号类型和参数个数不确定函数参数的使用方法，并提供了一个范例。通过宏定义的方式，可以方便地处理不定参数的情况。文章中给出了具体的代码实现，并对代码进行了解释和说明。这对于需要处理不定参数的情况的程序员来说，是一个很有用的参考资料。 ... [详细]

蜡笔小新 2023-12-14 12:36:28
usb
[译]技术公司十年经验的职场生涯回顾

本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同，令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望，认为人类有能力不断改善自己。 ... [详细]

蜡笔小新 2023-12-14 11:31:05
int
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
eval
推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标

原创：石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人，希望在平日的工作学习中，挖掘数据的价值， ... [详细]

蜡笔小新 2023-12-13 19:35:25
int
Oracle分析函数first_value()和last_value()的用法及原理

本文介绍了Oracle分析函数first_value()和last_value()的用法和原理，以及在查询销售记录日期和部门中的应用。通过示例和解释，详细说明了first_value()和last_value()的功能和不同之处。同时，对于last_value()的结果出现不一样的情况进行了解释，并提供了理解last_value()默认统计范围的方法。该文对于使用Oracle分析函数的开发人员和数据库管理员具有参考价值。 ... [详细]

蜡笔小新 2023-12-13 19:07:23
blob
sklearn数据集库中的常用数据集类型介绍

本文介绍了sklearn数据集库中常用的数据集类型，包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集，包含了波士顿506处房屋的13种不同特征以及房屋价格，适用于回归任务。 ... [详细]

蜡笔小新 2023-12-13 17:45:15
int
VB.NET在线急等问题解决方法，如何统计数据库字段下的数据并显示在文本框里？

本文介绍了一个在线急等问题解决方法，即如何统计数据库中某个字段下的所有数据，并将结果显示在文本框里。作者提到了自己是一个菜鸟，希望能够得到帮助。作者使用的是ACCESS数据库，并且给出了一个例子，希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句，得到的结果是650，但不知道如何得到560。希望能够得到解决方案。 ... [详细]

蜡笔小新 2023-12-13 15:15:30
int
SpringJdbcTemplate的使用详解

本文详细介绍了Spring的JdbcTemplate的使用方法，包括执行存储过程、存储函数的call()方法，执行任何SQL语句的execute()方法，单个更新和批量更新的update()和batchUpdate()方法，以及单查和列表查询的query()和queryForXXX()方法。提供了经过测试的API供使用。 ... [详细]

蜡笔小新 2023-12-13 14:27:11