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=" ...
随机推荐
- feign服务中调用,传递token
默认spring-boot 微服务中 用feign来做服务间调用,是不会携带token传递的.为了能让服务间调用的时候带上token,需要进行配置,增强resTemplate 1.先实现请求拦截器 ...
- 图解|从根上彻底理解MySQL的索引
这是图解MySQL的第4篇文章,这篇文章会让你 明白什么是索引,彻底理解B+树和索引的关系: 彻底理解主键索引.普通索引.联合索引: 了解什么是HASH索引,InnoDB和MyISAM索引的不同实现方 ...
- 『现学现忘』Docker基础 — 13、通过脚本安装Docker
Docker官方提供方便用户操作的安装脚本,用起来是非常方便.但是要注意的是,使用脚本安装Docker,是安装最新版本的Docker. 注意:不建议在生产环境中使用安装脚本.因为在生产环境中一定不要最 ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
- LGP3311题解
为什么我和同学对比了一下,发现我和他的做法差别很大啊 对于这种问题,我们把整个字符串分为两个部分:前缀顶着最高位和后缀没有顶着最高位. 我们枚举这个前缀,然后后缀通过 DP 来搞定. 不包含任何一个子 ...
- vscode使用python虚拟环境
vscode使用python虚拟环境 创建好虚拟环境之后,在vscode中配置使用python的虚拟环境. 首先打开设置,然后搜索python venv, 在python: Venv Path中设置为 ...
- java-计算机
计算机 硬件 装机:CPU 内存 主板 IO设备(input output) 冯诺依曼体系结构 CPU读取数据在运算器中运算传输到存储器,控制器控制输出结果. 软件
- 关于alertmanager报No private IP address found, and explicit IP not provided
./alertmanager --config.file=alertmanager.yml level=info ts=2021-11-22T05:53:11.195Z caller=main.go: ...
- ssh编译安装后重启失败问题
编译好的ssh重启出现如下报错 这个原因是因为systemd与ssh不兼容造成的 删掉服务 rm /usr/lib/systemd/system/sshd.service 重启 /etc/init.d ...
- Redis安装、说明、Python中使用
Redis安装与简单使用 Redis说明 redis是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库 redis特点 Redis 支持数据的持久化,可以将内存中的数据保存在磁盘 ...