php 实验一 网页设计
实验目的：
1、 能够对整个页面进行html结构设计。
2、 掌握CSS+DIV的应用。
实验内容及要求：
***个人博客网页
参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局，插入图像，flash或者影片播放，插入超级链接（至少3个），例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。
实验源代码：
myweb.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我试试这个昵称好使不的主页</title>
<link href="myweb.css" rel="stylesheet">
</head>
<body>
<div class="main">
<div class="left_div">
<p class="left_p"><img class="head" src="head.jpg"></p>
<h1 id="name">linmob</h1>
<p class="left_p">Is't never too old to learn.</p>
<hr/>
<p class="mid">
<p>我是一个编程菜鸟，最喜欢的事是篮球、追剧和改Bug</p>
<p>最不喜欢的事是洗碗</p>
<p>我会不定时的上传自己的学习经验</p>
</p>
<hr/>
<p class="min">欢迎来到我的个人主页！</p>
<div class="left_p">
<div class="button" >
<a class="a" href="https://www.cnblogs.com/linmob/">博客园</a>
</div>
<div class="button" >
<a class="a" href="https://github.com/linmob2567">github</a>
</div>
<div class="button" >
<a class="a" href="https://space.bilibili.com/554351352">b站</a>
</div>
<div class="button" >
<a class="a" href=" https://user.qzone.qq.com/1483249195/main">QQ空间</a>
</div> </div>
<div class="left_p">
<a class="di" href="setUp.html">关于我</a>
</div> </div>
<div class="right_div">
<div class="list">
<li>
<h2 class="list_title">
<a href="https://www.cnblogs.com/linmob/p/14611695.html">
Python:爬取全国各省疫情数据并在地图显示
</a>
</h2>
<p>基于python语言爬取腾讯的疫情数据</p>
<a>
<time>2021-03-30 14:02</time>
<a href="https://www.cnblogs.com/linmob/p/14611695.html">继续阅读</a>
</a>
</li>
<hr class="line"/> <li>
<h2 class="list_title">
<a href="https://www.cnblogs.com/linmob/p/14353748.html">
一个抽取百度定位的教程
</a>
</h2>
<p>基于百度地图demo实现软件定位功能</p>
<a>
<time>2021-01-31 20:02</time>
<a href="https://www.cnblogs.com/linmob/p/14353748.html">继续阅读</a>
</a>
</li>
<hr class="line"/> <li>
<h2 class="list_title">
<a href="https://www.cnblogs.com/linmob/p/12739190.html">
学习JAVA语言的第一步
</a>
</h2>
<p>安装好JAVA开发环境并且在Eclipse上面运行HelloWorld程序</p>
<a>
<time>2020-04-20 17:29</time>
<a href="https://www.cnblogs.com/linmob/p/12739190.html">继续阅读</a>
</a>
</li>
</div>
</div>
</div> </body>
</html>
myweb.css
div{
top:0;
float: left;
}
li{
margin-top: 50px;
margin-bottom: 50px;
margin-left:10%;
width: 100%;
list-style: none;
}
*{
margin: 0;
padding: 0;
}
p{
margin-top: 10px;
margin-bottom: 10px;
}
a{
color: white;
}
.line{
margin-left: 10%;
width: 220px;
}
.main{
width:100%;
height:100%;
position: absolute;
background: lavenderblush;
}
.left_div{
background: #474b60;
width:30%;
height:100%;
font-size: 20px;
color: white;
text-align:center;
}
.right_div{
background: url("girl.jpg") no-repeat;
background-size: cover;
width:70%;
height:100%;
}
.head{
border-radius:50%;
width:100px;
height:100px;
}
.list{
width:100%;
height:100%;
background-color:rgba(71,75,96,0.6);// -->70%的不透明度
}
.button{
border-style: solid;
border-color: white;
text-decoration:none;
border-radius: 30px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
text-align:center;
}
.a{
margin-left: 20px;
margin-right: 20px;
text-decoration:none;
}
.mid{
margin-left: 50px;
margin-right: 50px;
font-size: 20px;
}
.min{
margin-left: 50px;
margin-right: 50px;
font-size: 16px;
}
hr{
margin-bottom: 40px;
margin-top: 40px;
}
.left_p{
margin-top: 50px;
width: 100%;
text-align: center;
}
.di{
margin-top: 100px;
font-size: 10px;
width: 100%;
text-align: center;
}
setup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息设置</title>
<link href="setup.css" rel="stylesheet">
</head>
<body>
<div>
<form action="myweb.html" method="post">
头像：<input type="file" id="head" required class="put"><br>
昵称：<input type="text" id="name" class="put"><br>
签名：<input type="text" id="note" class="put"><br>
介绍：<input type="text" id="jieshao" class="put"><br>
邮箱：<input type="text" id="mail" class="put"><br>
<input type="submit" value="提交" class="button">
<button type="reset" class="button">重置</button>
</form>
</div>
</body>
</html>
setup.css
div {
font-size: 15px;
font-family: 华文行楷;
margin-top: 200px;
color: white;
background: rgba(71,75,96,0.6);
}
a:hover {
font-size: 40px;
}
a:link {
color:#6495ED;
}
a:visited {
color: #6495ED;
}
form {
clear: both;
font-family: 华文行楷;
font-size: 30px;
margin-left: 43%;
}
#nav{
position:relative;
width:100%;
height:80px;
text-align:center;
overflow:hidden
}
#nav .nav-skin{
float:left;
position:relative;
left:50%;
}
#nav .nav-skin li{
font-size: 20px;
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
line-height:60px;
}
.button {
margin-top: 30px;
width: 100px;
padding:8px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
margin-left: 30px;
margin-bottom: 30px;
font-size:75%
}
.put{
margin-top: 20px;
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px; /*css3属性IE不支持*/
padding-left:5px;
width: 200px;
height: 30px;
background: rgba(71,75,96,0.6);;
}
body {
background-repeat: no-repeat;
background-size:cover;
background-attachment: fixed;
background-image: url(girl.jpg);
}
php 实验一 网页设计的更多相关文章
- （转）自适应网页设计（或称为响应式web设计）（Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 网页设计（CSS&JS）
实验一 简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...
- 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版
网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...
- 网页设计与开发：HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...
- Httpster –世界各地最潮的网页设计案例聚合网站
Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...
- 20145215&20145307《信息安全系统设计基础》实验二 固件设计
20145215&20145307<信息安全系统设计基础>实验二 固件设计 实验目的与要求 了解多线程程序设计的基本原理,学习 pthread 库函数的使用. 了解在 linux ...
- 自适应网页设计（Responsive Web Design）
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 20145218&20145240 《信息安全系统设计基础》实验二 固件设计
20145218&20145240 <信息安全系统设计基础>实验二 固件设计 实验报告链接:http://www.cnblogs.com/20145240lsj/p/6035512 ...
- 手机web——自适应网页设计（html/css控制）
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
随机推荐
- zookeeper的JAVA API使用
1.创建连接 2.创建节点 3.监听信息 Watcher.class 4.获取节点 Stat stat = new Stat(); zk.getData(Path,true,stat); 5.修改节点 ...
- vue项目在nginx中不能刷新问题
修改nginx配置文件为 server { listen 80; server_name www.vue.com; root html/xxx/dist/; client_max_body_size ...
- 微信小程序结合原生JS实现电商模板（一）
前几天遇到一个朋友求助,实现购物车的相关功能,一时心血来潮,想着抽空搭建一个小程序电商平台(虽然网上有很多,但还是自己撸一遍才是王道),所以在工作之余整了一个仓库,今天提交了第一次代码,已经满足了朋友 ...
- 面试官：Redis中的缓冲区了解吗
hello 大家好,我是七淅(xī). Redis 大家肯定不陌生,但在使用层面看不到的地方,就容易被忽略.今天想和大家分享的内容是 Redis 各个缓冲区的作用.溢出的后果及优化方向. 在开始正文前 ...
- 关于BFS
嗨,又是躺平的一天呢 下文有很多未经版权允许而私自转载,不喜勿喷 今天我来整理亿下关于 BFS 这个"高级"的东西: 首先,我不得不提亿句 关于队列 是个啥 队列(queue)是一 ...
- MASA Blazor入门这一篇就够了
1.什么是Blazor? 有什么优势? ASP.NET Core Blazor 简介 Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScr ...
- VuePress 博客之 SEO 优化（六）站长工具
前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇接着 ...
- STM32芯片命名规则 | STM32大中小容量芯片之间的差别
1. STM32命名规则 STM32F105和STM32F107互连型系列微控制器之前,意法半导体已经推出STM32基本型系列.增强型系列.USB基本型系列.增强型系列:新系列产品沿用增强型系列的72 ...
- Hadoop-全分布式配置
目录 一.配置基础环境 1.配置网络信息 2.配置主机名 3.主机名与IP的映射关系 4.测试互通性 二.关闭防火墙和SELinux 1.关闭防火墙 2.关闭SELinux 三.安装 Hadoop 1 ...
- python3 爬虫 Scrapy库学习1
1生成项目:生成项目文件夹 scrapy startproject 项目名 2生成爬虫文件 scrapy genspider 爬虫名 指定域名 3进入items文件可以输入自己想要爬取的内容比如 te ...