简单的页面

最新推荐文章于 2024-06-03 14:59:34 发布
最新推荐文章于 2024-06-03 14:59:34 发布
阅读量162 收藏 1
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwr12138333/article/details/125506906
版权

简单的打个框架方便交作业。。。没什么技术含量（用的vscode）
在这里插入图片描述
做了一个简单的页面以备不时之需。

代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 头部区域 -->
    <div class="header w">
        <div class="logo">
            哎,该睡觉了！
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">商品管理</a></li>
                <li><a href="#">了解我们</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <button>搜索</button>
        </div>
        <div class="user">
            qq-wwr
        </div>
    </div>
    <!-- banner区域 -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
            <ul>
                <li><a href="#">前端开发 <span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
            </ul>
            </div>
        </div>

    </div>
    <!-- 课程区域 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <dl>
                <dt>学成制作</dt>
                <dd><a href="#">联系</a></dd>
                <dd><a href="#">联系</a></dd>
                <dd><a href="#">联系</a></dd>
                <dd><a href="#">联系</a></dd>
                <dd><a href="#">联系</a></dd>
                </dl>
            </div>
            <div class="left">
                <div class="logo">
                    哎,该睡觉了！
                </div>
                <p>春华竞芳，五色凌素，琴尚在御，而新声代故！
                锦水有鸳，汉宫有木，彼物而新，嗟世之人兮，瞀于淫而不悟！
                朱弦断，明镜缺，朝露晞，芳时歇，白头吟，伤离别，努力加餐勿念妾，
                锦水汤汤，与君长诀！</p>
                <a class="app" href="#">下载APP</a>
            </div>
            
        </div>

    </div>
</body>
</html>

css样式：

*{
    margin: 0;
    padding:0;
}
/* 先写版型 */
.w{
    width:1200px;
    margin:auto;
}
.clearfix:before,.clearfix:after{
    content:"";
    display:table;

    }
    .clearfix:after{
    clear: both;
    }
    .clearfix{
    *zoom:1;
    }
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.header{
    height:42px;
    background-color: pink;
    margin: 30px auto;
}
.logo{
    float: left;
    width: 198px;
    height:42px;
    background-color: transparent;
    font-size: 30px;
    font-family: "宋体";
    font-style: italic;
    font-weight: 10px;
    color: rgb(236, 236, 243);
}
.nav{
    float: left;
    margin-left: 60px;
}
.nav ul li{
    float: left;
    margin:0 15px;
}
.nav ul li a{
    display: block;
    height: 42px;
    padding: 0 10px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover{
    border-bottom: 2px solid #00a4ff;
    color:#00a4ff;
}
.search{
    float: left;
    width:412px;
    height: 42px;
    margin-left: 50px;
}
.search input{
    float: left;
    width:345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: none;
    background-color: rgb(156, 228, 153);
}
.search button{
    float: left;
    width:50px;
    height:42px;
    border:none;
    background-color: #00a4ff;
}
.user{
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}
.banner{
    height: 421px;
    background-color:#191f3b;

}
.banner .w{
    height: 421px;
    background-color: #00a4ff;
    background-image: url(../imgs/monter.png);
}
.subnav{
    width:190px;
    height:420px;
    background-color:rgba(29, 35, 63,0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding :0 20px;
}
.subnav ul li a{
    font-size: 14px;
    color:aliceblue;
}
.subnav ul li a span{
    float: right;
}
.subnav ul li a:hover{
    color:#00a4ff;
}
.box{
    margin-top: 30px;
}
.box-hd{
    height: 45px;
    
}
.box-hd h3{
    float: left;
    font-size: 20px;
    color: #050505;
}
.box-hd a{
    float: right;
    font-size:12px ;
    color: #666;
}
.box-bd ul li{
    float: left;
    width: 228px;
    height: 270px;
    background-color: #00a4ff;
    margin-left: 15px;
    margin-bottom: 15px;
}
.box-bd ul img{
    float: left;
    width: 228px;
    height: 270px;
    margin-left: 15px;
    margin-bottom: 15px;
}
.box-bd ul{
    width: 1225px;
}
/* .box-bd{
    overflow:hidden;
} */
.footer{
    height: 415px;
    background-color:black;
}
.footer .w{
    padding-top: 30px;
}
.footer .copyright{
    float: right;
}
.footer .left{
    float: left;
}
.footer .left dl dt{
    font-size: 16px;
    color: #00a4ff;
    margin-bottom: 5px;
}
.footer .left dl dt a{
    color:aliceblue;
    font-size:12px;
}
.copyright .p{
    margin: 20px 0 50px 0;
    font-size: 12px;
    color:#666;
}
.copyright .app{
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    color:#00a4ff
}
喜欢晚风
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
简单页面设计
qq_63835662的博客
07-29 140
inputtype="text"class="form-control"id="inputUserName1"placeholder="用户名">
简单的网页
zhukangle的博客
01-03 2615
add.html 操作mongodb数据库 增加 删除 修改 查找 增 remove.html 操作mongodb数据库
HTML做一个简单的页面（纯html代码）地球专题学习网站
最新发布
网页设计与制作
06-03 625
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
做一个简单的页面——基础
m0_65762277的博客
11-16 366
1.html标签有成双成对的，也有自结束标签2.html中是不区分大小写，但一般用小写居多3.标签可以嵌套，但不可以交叉嵌套4.养成良好的注释习惯，简洁，明了注释也不可以嵌套5.html.css,js都是一种宽泛的语言，它的容错率比较高它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响，而且它改的不一定是你想要的。
html简单页面
11-10
html简单页面
js实现简单页面全屏
10-16
主要为大家详细介绍了js实现简单页面全屏的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简单页面的华丽变身-SearchAppProductDesign
02-26
网页端搜索引擎的简单易用一直是网页产品设计中的优秀范例。它巧妙地利用大片留白，一个搜索框入口，链接排布形式和品牌...所以简单页面也开始了华丽变身，纷纷设计了自己的独立客户端。当将简单的页面转变为客户端软件
simple-page:简单页面
04-27
Sass入门包 用于编译Sass和运行开发服务器的轻量级软件包 版本 1.0.0 用法 安装 安装依赖项（gulp，gulp-sass，浏览器同步） $ npm install 跑步 这将监视您的sass文件，对其进行编译，并在运行您的dev服务器。...
HTML练习css--制作开心餐厅介绍页面
gengzhi1293443962的博客
10-14 1万+
百度一下,就知道 .a{font-size:12px;color:#00DB00;} .b{font-size:24px;color:#00DB00;} p{font-size:12px;} .c{font-size:18px;color:red;} #d{font-size:12px;color:#2828FF;} 开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打
简单页面表单
蓦然回首
09-04 674
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
简单的HTML登录页面
一个橙子
06-06 3万+
&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;         html {             background-color: #B5DEF2;  
做一个简单的页面——基础（2）
m0_65762277的博客
11-17 171
在编写网页的时候，有一些字符我们是没有办法打出来的，例如空格、大于号、小于号等这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来代替这些额外的字符就叫实体实体的语法： &实体的名字；常用的实体：空格；大于号 >小于号
简单页面设计思路
weixin_46060794的博客
05-08 2492
初次编写网页的思路 下面是我根据视频学习的网页 该网页由多个页面组成，我就以其中的首页页面介绍： 首先在文件夹先建立一个文件用于存放需要用到的图片和对应的css文件，如图所示： 用link将css样式导入到HTML中： <link rel="stylesheet" type="text/css" href="./homepage.css"> 通过观察首页的布局，我们可以发现该页面由页眉，导航栏，导航栏下面的图片，正文，页脚，侧栏等组成。这些都可以看成不同的盒子。我将对每一部分进行介绍。
简易注册页面
weixin_42976232的博客
05-16 497
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form> <p>账号：<input type...
简单的页面标题
长镜头
04-19 186
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;title&gt;goole&lt;/title&gt;
HTML制作简单的页面
热门推荐
liaozhongmin_net
07-18 5万+
一.HTML页面制作代码部分 <html> <head> <meta charset="utf-8"> <title>Music Login Form</title> <!--css代码声明--> <style type="text/css"> //div的设置 #showdiv{ width: 450px; height: 530px; border: solid 2px
android简单页面跳转eclipse
04-27
在Android应用程序的开发中，经常需要使用到页面跳转技术，而Eclipse作为Android...至此，简单页面跳转的实现过程结束。需要注意的是，在实际开发中，还需要考虑页面传值、回传值等问题，上述代码只是最基本的示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值