初写-简单页面设计

最新推荐文章于 2024-09-10 14:15:01 发布
最新推荐文章于 2024-09-10 14:15:01 发布
阅读量4.1k 收藏 9
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38233172/article/details/89077375
版权 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>作品1</title>
<style>
*{margin:0;padding:0;}
body{
	background:#E6E6E6;
	}
	.quan{
		boder:1px solid #30F;
		height:580px;
		}
	.logo{
		border:1px solid #000;
		height:35px;
		overflow:hidden;
		margin:1px;
		background:#C33;
		}
	.logo img{
		width:30px;
		height:30px;
		padding:2px;
		}
	.logo a {
		float:right;
		width:100px;
		height:30px;
		padding:7px;
       	text-align: center;
		font-size:13px;
		color:#FFF;
		}
	.figure1{
		
		border:1px solid #0F0;
		}
	.row1{
		border:1px solid skyblue;
		
		}
	.tuceng{
		border:1px solid #F03;
		width:100%;
		height:160px;
		
		}
	.fig1{
		margin:5px 50px;
		display:block;
		
		}
	ul{
		list-style:none;
		float:left;
		margin:10px 50px;
		}
	
	.tu{
		clear:both;
		width:150px;
		height:120px;
		border:1px solid #33C;
		}
	
	.tu img{
		width:150px;
		height:120px;
		}
	.miaoshu{
		border:1px solid #9FF;
		width:150px;
		}
	.miaoshu img{
		float:right;
		width:14px;
		height:14px;
		vertical-align:center;
		margin:2px;
		}
</style>
</head>

<body>
<div class="quan">
    <div class="logo">
    	<img src="xiaoyu.jpg">
        
        	<a href="#" class="top">home</a>
            <a href = "#" class="top">Gallery</a>
            <a href = "#" class="top">Contact</a> 
            <a href = "#" class="top">Help</a>
        
    </div>
    <div class="figure1">
    	<div class="row1">
        	<div class = "tuceng">
            	<div class="fig1">
                	<ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                    <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                    <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                     <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                </div>
            </div>
            
            <div class = "tuceng">
            	<div class="fig1">
                	<ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                    <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                    <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                     <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                </div>
            </div>
            <div class = "tuceng">
            	<div class="fig1">
                	<ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                    <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                    <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                     <ul>
                        <li class="tu">
                            <img src="p1.jpg"/>
                        </li>
                        <li class="miaoshu">
                            <p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
                        <li>
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
   
</div>
 <footer style="text-align:center;color:#999;">footer copyright &copy;2018</footer>
</body>
</html>

在这里插入图片描述

nnlss
关注
简单页面设计
qq_63835662的博客
07-29 147
inputtype="text"class="form-control"id="inputUserName1"placeholder="用户名">
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
weixin__BJ050106的博客
08-17 4981
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大......
一个简单的网页设计HTML5作业
好好读书
06-26 9万+
简单的html设计作业，初次学习，希望指正！
用HTML+CSS做一个漂亮简单的个人网页——樱木花道篮球3个页面 学生个人网页设计作品 学生个人网页模板 简单个人主页
weixin_BJ050106的博客
08-17 1244
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
一个简单完整的网页
淡淡的芦苇的博客
07-24 6万+
获得源码链接，点击这里 网页头部+banner和信息部分+新闻部分+底部 一 头部 效果： 先对css进行初始化 分析：头部有一张图片和一个input输入框还有一个按钮+下面的通栏 因为用到左浮，右浮的地方不同我们可以写一个通类 这里的logo图片如果不定义宽高会影响下面的通栏的设置，影响其中的第一个为首的顺序无法对齐 二、通栏（宽度为适应屏幕所以是10...
HTML初实践--简易网页设计
weixin_52137034的博客
03-22 3002
HTML操作简单，容易上手，经过简单的基础学习就可以做出来美丽的网页啦！！！不过，要想做出来炫酷的页面，还需要努力呀！ 第一部分：成品展示 第二部分代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
简历模板2-3页面-214套.zip
11-06
在求职过程中，一份精心设计的简历能够为应聘者赢得更多的面试机会。"简历模板2-3页面-214套.zip" 是一个压缩包文件，包含了大量的简历模板，旨在帮助求职者快速创建出吸引眼球的专业简历。这个压缩包特别之处在于它...
　　走向ASP.NET架构设计—第三章—分层设计，初涉架构(中篇)
02-27
1．阐明示例需求 本篇还是用之前的电子商务网站中的一个简单的场景来讲述：在页面上需要显示产品的列表信息。并且根据产品的类型不同，计算出相应的折扣。 在上篇中，我们已经设计项目的逻辑分层。我们再来回顾下...
我的大二web课程设计 使用HTML做一个简单漂亮的页面（纯html代码）
weixin__BJ050106的博客
08-14 2580
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
html5简单网页设计作品,30个以简约为主的网页设计作品
weixin_36073714的博客
05-30 6503
30个以简约为主的网页设计作品7月 24, 2013评论Sponsor网站风格有很多，有全屏、FLASH、扁平化等等，每种风格各有特色，今天我们主要展示一些以简约为主的网页设计作品，简单不难，但当你把简单的东西做到极致，哪就有难度了，我们称这个为极简主义风格，好吧，看看下面这些作品，希望你也能设计一个”简约而不简单”的优秀网页设计出来。或者你喜欢这些网站作品Derek BoatengLOGO直接以...
CSS盒模型--边框设置：border: 1px solid red(像素 样式 颜色 )，border-bottom:1px dotted #ccc
12-16 7万+
盒模型--边框（一） 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是border代码的缩写形式，可以分开写： div{ border-width:2px; border-s
简单的HTML登录界面
热门推荐
mingzi1245的博客
05-10 9万+
1 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapc
简单的网页设计（HTML篇1）
qq_41185288的博客
07-15 1万+
简单的网页设计（HTML篇1） 本节成型网页框架： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>给新月的一封回信</title> </head> <body> <div align...
极简网页设计技巧，打造简约之美
aimeeth的博客
05-04 5544
本文出自Mockplus团队，Mockplus是一款更快更简单的原型设计工具。极简主义网页设计风格，如何才能做到简约而不简单？简约风设计需要了解和掌握哪些禁忌和技巧，才能让网页设计简洁而不失魅力？继续阅读文章，小编将结合具体实例为大家一一讲解。近几年，极简主义设计风格（也称简约设计风格）越来越多的为设计师们所认可，采用并日渐流行。而这不仅仅是因为其界面简单整洁，便于用户理解和操作，还因其在提升网站...
从0到1，编写一个简单的前端页面
持续学习中
04-30 1334
作者：谭东 从0到1，编写一个简单的前端页面。 ...即将完善
简单静态网页的设计
mrzheng0的博客
06-02 2万+
总体思路：先构思好一个图书馆的框架以这个框架为主体，进行拓展，丰富其他内容：只是简单地做了四个页面，“我的图书馆”页面可以采用同样的方式编写出来。主体的编程：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;上海图书馆&lt;/title&gt;&lt;style
如何设计一个简单的网页
weixin_66529571的博客
01-20 5409
设计一个简单的网页 1.按住文件新建文本（Ctrl+N），设计一个网页标题，点击创建 2.在<body>内部加入所需要的标签 如图中需要标题标签，水平线标签，段落标签 3.保存（Ctrl+S），按住F12即可运行 ...
前端用html写excel文件直接打开
最新发布
全易
09-10 586
html文件直接用excel打开
初音动漫HTML网页设计模板 - Dreamweaver作业静态页面
8. **二级三级页面**：这表明设计不仅包含首页，还有多个子页面，涵盖了多级导航，帮助你掌握如何组织和链接不同的页面。 9. **表单和表单处理**：表单是网页中收集用户信息的重要工具，涉及`<form>`标签、输入元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值