CSS制作简易花束网站首页(新手适用)

news/2024/5/9 2:17:24/文章来源:https://blog.csdn.net/qq_43537987/article/details/86483361

效果展示:

在这里插入图片描述

制作头部:

在这里插入图片描述
思路:在h1标题中加入颜色和不同字体大小等样式,在标题下加条下划线即可。

<header><h1><strong>浪漫の都</strong><em>___这一生只为与你相遇</em></h1><hr size="2" color="hotpink" width="980px">
</header>
 header{width: 980px;margin: 0 auto 8px;height: 86px;line-height: 86px;text-align: center;font-family: 楷体;color: hotpink;}header strong{font-weight: normal;font-size: 30px;}header em{font-weight: normal;font-size: 20px;}

内容部分:

在这里插入图片描述
思路:商品分类>是一个h2标签,下面插入一张美丽小姐姐图片,最后引用p标签写入相应文本。
h2改变字体大小样式颜色,并利用margin属性调整好在网页中位置,
图片调整大小以及在网页中的位置,p标签中文字居中显示并改变颜色。
具体代码如下:

<div class="fenlei"><h2>商品分类></h2><img src="images/1.jpg" alt="网上花店"><br><p>我喜欢一些花儿,静静的开放,从不声张。小小的花朵,有着异样的芬芳...</p><p>I love flowers ,quietly open , never quiet. Little flowers , with the same fragrance...</p>
</div>
.fenlei{height: 530px;margin: 0px auto;}.fenlei h2{font-size: 18px;font-family:"微软雅黑";color: darksalmon;height: 42px;line-height: 42px;margin: 10px 140px 0px;}.fenlei img{width: 980px;height: 400px;margin: 0px 140px;}.fenlei p{line-height: 30px;text-align: center;color: navajowhite;font-size: 17px;}

在这里插入图片描述
思路:左面插入一张图片并使用border-radius属性使其变为圆形,右面使用h2,p标签插入文字并改变其样式即可。
具体代码如下:

<div class="description"><img src="images/3.jpg"><h2>{爱情,就是要玫瑰}</h2><p><br><span>/</span><br><br><br>我想你的时候,你也在想我么?<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无论我们相距多远,无论前路漫漫<br><br>&nbsp;&nbsp;&nbsp;&nbsp;只想说:爱上你是我今生最大的幸福</p>
</div>
.description{width: 1000px;height: 420px;position: relative;}.description img{height: 400px;width: 400px;border-radius: 50%;margin: 0 140px;}.description h2{position: absolute;top: 50px;left: 700px;color: darksalmon;}.description p{position: absolute;top: 100px;left: 700px;color: deepskyblue;}

在这里插入图片描述
思路:插入图片设置图片大小,并加入边框即可。

<div class="container"><img src="images/a.png" alt=""><img src="images/b.png" alt=""><img src="images/c.png" alt=""><img src="images/d.png" alt=""><img src="images/e.jpg" alt=""><img src="images/f.jpg" alt=""><img src="images/g.jpg" alt=""><img src="images/h.jpg" alt=""><img src="images/i.jpg">
</div>
.container{width: 800px;margin: auto 210px;column-width: 250px;-webkit-column-width: 250px;column-gap:20px;-webkit-column-gap:20px;}.container img{width: 250px;height: 300px;margin: 5px;border: 4px solid darksalmon;}

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

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

相关文章

在chrome中设置禁止访问的网站

如何在chrome中禁止访问某个网站&#xff1a; 点击右上角&#xff0c;一竖排点那个按钮&#xff1a; 2.选择“设置”&#xff1b; 3.左边选择“隐私与安全设置”&#xff1a; 4.选择网站设置最左边的小箭头&#xff1a; 5.点击这个&#xff1a; 6.找到禁止的地方&#…

PHP网站登录分发程序+无需申请登陆权限

简介&#xff1a; 申请一个Q互联登录权限后&#xff0c;可以分发给更多的网站使用&#xff0c;安装与配置请下载后打开readme.txt 发起登陆&#xff1a;域名/api.php?token&#xff0c;登陆之后会成功跳转到后台token对应的回调地址&#xff0c;会带着获取到openid回调。 下…

在线增加网站PV量单页源码

介绍: PV是什么想必想必站长们都知道是什么&#xff0c;所以我这里就不解释了&#xff0c;我看了下程序文件&#xff0c;核心文件是被加密的&#xff0c;但是不影响使用&#xff0c;加密类型是混淆加密&#xff0c;混淆加密是很好解的&#xff0c;如果你是在想要源文件&#x…

大型网站高并发处理Nginx+lvs

一.负载均衡 为啥会出现负载均衡 在海量并发的环境下&#xff0c;用户每一次请求服务器&#xff0c;都需要大量的创建线程&#xff0c;每一次的线程都必须分配资源&#xff08;CPU、内存、带宽、磁盘 IO等&#xff09;&#xff0c;当资源不足的时候就会使得服务器宕机而无法提…

“网络白痴”初学SEO成长经验心得

三个月前因为工作上的需要&#xff0c;开始接触网络知识。因为我的工作面对的是网站&#xff0c;负责对网站进行优化&#xff0c;所以在范围那么大的网络知识中只需要学习其中的一小部分就可以了。 网站优化在行业中叫做“seo”(Search Engine Optimization)汉译为搜索引擎优化…

我为什么要做个人网站——互联网乌托邦的理想

2019年3月6日夜&#xff0c;我在qq空间第一次公开我的个人网站。 这是我的第一个网站&#xff0c;不&#xff0c;现在它还不能算是一个网站&#xff0c;因为做好的&#xff0c;仅仅一个欢迎页面&#xff0c;而真正的网站&#xff0c;是要有更丰富的页面和内容的&#xff0c;这是…

电商网站--放大镜效果的实现

最近有做一个PC端的简单官网,主要是进行商品的展示,目前没有收藏,加入购物车,购买的功能,商品详情页有商品图片,各种详细信息的展示,原型上是没有放大镜的功能的,当时有空余时间,我就想着试试放大镜的效果吧,js可以实现,但是网上页有各种插件,不用白不用,那就用插件吧 // 1,,,…

编译安装nginx网站服务与虚拟主机配置

文章目录 一、Nginx简介二、编译安装Nginx&#xff0c;以及优化服务2.1、编译安装nginx2.1.1 xftp导入nginx依赖包2.1.2 yum安装依赖包2.1.3 解压软件包&#xff0c;并配置configure进行编译安装2.1.4 优化执行路径并创建不可登录的程序用户2.1.5 制作管理脚本 2.2 Nginx的访问…

一个小女孩是如何拯救全球第三大社交网站的?

很多互联网产品都从用户那里得到过很大的帮助&#xff0c;最基本的是用户会对自己使用的产品进行评论或者提出建议。但也有用户为自己喜爱的产品做出过巨大的贡献。 2008年印象笔记(Evernote)陷入了困境&#xff0c;账上的钱只够支撑三周。CEO Phil Libin 打算关掉这家公司。 就…

SNS是什么?有哪些类型的SNS网站?

SNS&#xff0c;全称Social Networking Services&#xff0c;即社会性网络服务&#xff0c;专指在帮助人们建立社会性网络的互联网应用服务。SNS若在互联网领域就有三层含义&#xff0c;他们的英文缩写分别是&#xff1a;服务 Social Network Service&#xff0c;软件 Social N…

Mysql在大型网站的应用架构演变

原创文章&#xff0c;转载请注明&#xff1a; 转载自http://www.cnblogs.com/Creator/ 本文链接地址: Mysql在大型网站的应用架构演变 本文已经被多处转载&#xff0c;包括CSDN推荐以及码农周刊等等,阅读数超过5w,回流到我博客流量的还是比较少,不过这不重要, 后续会分享更多技…

使用you-get将网站视频下载到本地的具体操作

周五&#xff0c;我朋友给我一个b站的链接。他想要下载里面的视频。但是电脑上的b站是没有提供下载功能的&#xff0c;身为程序员。当然得帮兄弟这个忙啦。 此次操作我们会用到两个小东西&#xff1a;you-get、ffmpeg you-get使用方法 电脑需要安装python。输入命令 pip3 in…

某网站首页双12 活动 banner主色调选择

文章目录 案例背景 1 检验指标的确定2 确定检验统计量3 埋点收集数据4 确定H0,H15 确定显著性水平6 计算样本量7 利用统计工具实现检验 案例背景 某网站首页双12 活动 banner主色调选择&#xff08;现提供两个版本的banner)&#xff0c; banner 为网站PC端或App 的顶部或底部横…

Hadoop环境中使用Hive工具实现电商网站用户运营分析

文章目录 一、分析目标二、数据说明三、实现步骤1.建立用户指标体系2.建立分阶段用户标签2.1 按用户行为统计每日的不同阶段用户规模2.2 按周为单位分析最近两周的不同阶段用户的变化2.3 对比分析新用户群体与激活用户群体的人群画像、行为数据特点 3、用户复购分析3.1 计算2月…

手把手教你!0基础小白也可以使用谷歌服务器搭建自己的博客网站

准备工作 visa卡&#xff08;用于谷歌的认证&#xff09;fan&#xff08;翻&#xff09;qiang&#xff08;墙&#xff09;工具&#xff08;用于登陆谷歌&#xff09; 一 申请及注册谷歌云 1.登录Google Cloud官网并进行账户注册&#xff1a;https://cloud.google.com/ ,我们…

网站看板娘--偷就完事了(大雾)

最近项目做完了&#xff0c;想到博客园有些博主的博客有看板娘&#xff0c;就偷过来了 下面将一步步还原我偷的过程&#xff08;笑&#xff09; 首先准备一个html&#xff0c;放在tomcat的webapps的文件夹下&#xff0c;下载好的live2d文件夹&#xff08;提取码&#xff1a;d…

基于java的在线答疑网站系统——计算机毕业设计

网络答疑系统已经成为远程教育网站不可缺少的组成部分&#xff0c;它对提高远程教育的质量起着至关重要的作用。但目前的网络答疑系统功能比较简单、答疑效率低、智能性不高。随着人工智能和自然语言处理等相关技术的发展&#xff0c;未来的网络答疑系统将会在智能性、开放性、…

基于java的婚恋交友动态网站——计算机毕业设计

“网络红娘”的出现不仅对传统交友方式和恋爱观形成强烈冲击&#xff0c;更形成了一门具有良好发展前景的新兴产业。与欧美国家相比&#xff0c;我国婚恋网站起步较晚&#xff0c;目前仍处于跑马圈地的群雄纷争时代&#xff0c;一家独大的行业巨头尚未出现。虽然部分专业婚恋网…

Java+MySQL 基于Springboot+vue的鲜花销售商城网站——毕业设计

项目编号:JavaMySQL spring272-基于Springbootvue的鲜花销售商城网站#毕业设计 开发语言&#xff1a;Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:springbootvue 鲜花一直以来都是人们生活中的一个增色剂。尤其是在一些特殊的节日鲜…

Java+MySQL 基于Springboot+vue的零食销售商城网站——毕业设计

项目编号:JavaMySQL spring271-基于Springbootvue的零食销售商城网站#毕业设计 开发语言&#xff1a;Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:springbootvue ​随着人们生活条件的改善&#xff0c;人们对生活的追求也越来越高。…