一个用html css做的简易网站首页

最新推荐文章于 2023-06-30 10:00:00 发布
最新推荐文章于 2023-06-30 10:00:00 发布
阅读量289 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70469253/article/details/129408956
版权

 

这个页面采用了html标签css属性和一个js轮播图

主要用的是div盒子标签

img图片标签

ulli无序列表

class类选择器

给盒子设置宽width

给盒子设置高height

*｛

margin:0；

padding:0;

｝

清除页面默认样式

background-color背景颜色

字体颜色color

字体大小font-size

左浮动float:left;

外边距margin

边框border

边框圆角border-radius

居中text-align:center;

行高line-height

 

d72089bcedda418fb7d050794dc0733d.png 

b11e2dd7e6e44e4ea1c1a8a04f6d7095.png 

d50f12a824a1413a962834056a999c74.png

eb4d09ed4f1142ffa9bdb8c53b0ab4e9.png 

 

风生..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
qq_38512792的博客
03-19 432
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
用css制作网站首页
weixin_45137957的博客
08-16 8591
用css制作网站首页 ​ 下面是我仿照西部开源培训公司的首页写的一段代码，只完成了一部分，太长了且重复太多，所以就没有写完. ​ 这段代码中本来可以将重复的部分抽到一起，减少重复代码，我没有抽是为了看起来更直观 这是西部开源的网站： http://www.westos.org/ 可以对比着看看 <!DOCTYPE html> <html> <head> &...
使用html+css实现一个静态页面（含源码）
HTML网页设计
07-27 3873
使用html+css实现一个静态页面（含源码）
实训-利用HTML+CSS制作某米官网首页
m0_64336780的博客
04-08 9177
目录 项目介绍 需求分析 页面布局及样式实现 1.引入css文件及初始化 2.实现顶部广告 3.黑色导航栏 4.白色导航 5.banner 6.广告 7.手机 8.家电 9.视频 10.页脚 11.icon 网页总体效果图 总结 源码 项目介绍 学习HTML和CSS有一段时间了，笔者做了一个相对练习而言较为复杂的网页，某米的官网首页，上一下最终效果图： 这个网页相对来说还是比较有练习意义的，包含导航栏，大量的浮动和弹性布局以及一些细小却重要的知识点...
CSS----网站首页优化
mqingo的博客
11-03 345
CSS网站首页优化.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;网站首页优化&lt;/title&gt; &lt;style&gt; .logo{ float: left; width: 33%
基于HTML和CSS的简易旅游网站设计源码
最新发布
04-06
本项目是一个基于HTML和CSS的简易旅游网站，包含48个文件，主要文件类型包括图片、HTML页面、XML配置文件、CSS样式表、Git忽略文件、Markdown文档、Idea配置文件。系统设计旨在为用户提供一个简洁、实用的旅游信息...
基于Html+css+js实现的静态购物网站
06-30
2.添加并设计网站导航栏(导航栏目内容和样式自定)，链接为空链接； 3.添加并设计商品轮播图，图片、位置、大小等自定义; 4.设计商品分类展示效果(样式自定义)，每件商品必须有：商品名称、图片、价格内容；商品数目...
JS + CSS 做一个简易九宫格抽奖
09-17
在本项目中，我们将利用JavaScript（JS）和Cascading Style Sheets（CSS）技术来创建一个简单的九宫格抽奖程序。这个练习非常适合初级开发者，它将帮助你掌握基础的前端开发技能，包括DOM操作、CSS样式设计以及...
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
通过以上分析，我们了解到如何构建一个基本的HTML电影网页设计，包括HTML文档结构、CSS样式设置、前端布局技术、导航栏效果、JavaScript的应用以及多媒体元素的使用。此外，还提到了常用的HTML编辑器，这对于初学者...
简易图书馆管理系统（html+css）
09-17
《简易图书馆管理系统（html+css）》是一款基于前端技术实现的轻量级图书管理应用，主要利用HTML和CSS构建用户界面，为用户提供直观、简洁的图书检索和管理功能。在这个系统中，HTML负责结构化页面内容，而CSS则用于...
网站主页html+css
09-09
非常完整的实例，非常适合html+css 的学习,希望对大家有所帮助。
HTML+CSS写网站首页
m0_45434283的博客
10-13 9577
(html+css写网站首页) HTML <html> <head> <meta charset="UTF-8"> <title>网站建设</title> <link rel="stylesheet" type="text/css" href="css/Travel.css" /> </head>...
HTML基础——网站首页显示页面
anjiukonghe77852的博客
08-16 983
1、表格标签： border设置边框，align设置位置(居中等)，bgcolor设置背景颜色，cellspacing设置边框之间的空隙，cellpadding设置边框与里面内容的间距。 　　table表，tr行，td单元格 　　　　<table border="" width="" height="" align="" bgcolor="" cellpadding="" c...
写一个简单的网站首页，初识 CSS 中 Flex 布局
小张Python
10-03 631
源于《深入解析CSS》中的案例，首页做了简单的自适应，但没有涉及移动端适配 (不是不想做，奈何自己这块还是不太懂)，但涵盖知识点相对也比较多，包含Flex布局，内外边距，浮动等知识点。之前一直用 VUE 写后台管理界面，对前端 CSS 这块一直是半知半解，为了巩固这方便知识，抽空写一些基础页面来巩固一下。案例完整源码，公号【小张Python】后台回复关键字【FONT_CASE】 即可获取~
（html+css）一个完整的网页主页布局：logo+导航+banner+新闻列表...
热门推荐
qq_33569780的博客
05-19 4万+
作者是一只在web前端上探索进步的小白白..... （本篇代码中的banner图我还没学习完，所以暂时放的不规范哈，正式的话应该放在banner_con这个盒子里面的，我随后会回来补充正确放置的方法的！） ps:差点因为不会用编辑器而写不了博客QAQ........太蠢了 index.html(主页-结构) <!DOCTYPE html> <!-- 声明文档类型--> <html lang="en"> <!-- 确定语言形态 --> <head&
【HTML+CSS】小兔鲜儿网站首页（静态网页）
m0_63179877的博客
06-30 2786
小兔鲜儿网站首页是利用HTML+CSS进行开发，网站首页包括四部分内容，分别是快捷导航、banner图区域、新鲜好物、生鲜、尾部版权。
041_CSS及案例-网站主页模板
煮面要加牛奶的博客
02-17 914
JavaScript
HTML+CSS
m0_58361601的博客
06-01 972
1.结构性定义 文件类型 （放在档案的开头与结尾） 文件主题 （必须放在「文头」区块内） 文头 （描述性资料，像是「主题」） 文体 （文件本体） （由浏览器控制的显示风格） 标题 <H?></H?> （从1到6，有六层选择） 标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?> 区分 区分的对齐 引文区块 （通常会内缩） 强调 （通常会以斜体显示） 特别强调 （通常会以加粗显示） 引文 （通常会以斜体显示） 码
用HTML+CSS做成的一个简单网页（小兔鲜儿）
wym123_的博客
04-23 1万+
写在前面的话：在跟着黑马程序员视频学习的时候，做的一个由简单HTML+CSS知识组成的一个简单小网页分享给大家，可以供新手学习。 目录 效果图如下： HTMl相关代码如下： CSS相关代码如下： index.css： common.css： base.css： 所有资料网盘链接： 效果图如下： （用到的相关图片是自己随便找的，不太好看，大家可以自行更换） HTMl相关代码如下： index.html： <!DOCTYPE html> <html lang
用html和css做一个简易的计算器
05-29
好的，以下是一个简单的计算器的 HTML 和 CSS 代码示例： HTML代码： ``` <div class="calculator"> <input type="text" id="result" readonly> <button id="clear" onclick="clearResult()">C</button> <button onclick="appendToResult('7')">7</button> <button onclick="appendToResult('8')">8</button> <button onclick="appendToResult('9')">9</button> <button onclick="appendToResult('/')">/</button> <button onclick="appendToResult('4')">4</button> <button onclick="appendToResult('5')">5</button> <button onclick="appendToResult('6')">6</button> <button onclick="appendToResult('*')">*</button> <button onclick="appendToResult('1')">1</button> <button onclick="appendToResult('2')">2</button> <button onclick="appendToResult('3')">3</button> <button onclick="appendToResult('-')">-</button> <button onclick="appendToResult('0')">0</button> <button onclick="appendToResult('.')">.</button> <button onclick="calculate()">=</button> <button onclick="appendToResult('+')">+</button> </div> ``` CSS代码： ``` .calculator { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; margin: 20px auto; width: 200px; text-align: center; } .calculator button { font-size: 20px; background-color: #eee; border: none; cursor: pointer; padding: 10px; } .calculator button:hover { background-color: #ddd; } #result { font-size: 20px; padding: 10px; border: none; text-align: right; } ``` 该计算器使用了 HTML 的 `<button>` 和 `<input>` 元素，以及 CSS 的网格布局和样式来实现。JavaScript 代码需要根据 HTML 元素的 id 属性来实现计算器的基本功能，包括清除、输入数字和操作符、计算结果等。由于 JavaScript 代码不属于本次问题的范畴，这里就不提供代码示例了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值