php网页的注册界面设计,HTML开发博客之注册页面设计(一)

CSS文件的引入

新建文件reg.html文件

首先我们来分析网页布局

1477900255859704.png

这是我们页面完成后的效果,

网页分为三部分

头部,主体,和底部我们按照这个顺序开始编写。

头部导航栏的编写html>

用户注册页面
  •  首页
  • 科技资讯
  • 心情随笔
  • 资源收藏
  • 图文图片
  • 留言板
  • 登陆/注册

创建div盒子,在盒子中嵌套div,使用无序列表创建导航,引入logo图片。

创建css文件@charset "utf-8";

body{

background-color: #F0F0F0;

}

*{

border: 0px;

padding: 0px;

margin: 0px;

font-size: 14px;

}

#top{

width: 100%;

height: 90px;

background-color: white;

border-bottom: 1px solid #bbbbbb;

}

#menu{

width: 1000px;

overflow: hidden;

margin: 0 auto;

}

首先对全局初始化,对div做两个id标签,top和menu,分别设定头部的宽高,和页面整体布局的宽高。这样我们就得到如下图所示的页面

1477900292772640.png

接着对页面进行样式的修改#menu img{

height: 90px;

}

#menu ul{

list-style-type: none;

}

修改img的高度,对ul序列去掉格式。#menu ul li{

float: left;

height: 90px;

line-height: 90px;

margin-right: 50px;

}

#menu ul li a{

color: black;text-decoration: none;

display: inline-block;

}

#menu ul li a:hover{color: #FFD700;text-decoration: none}

对li标签进行设置,做浮动操作,调整高度和间距,使用display: inline-block;使导航栏成为快元素。去掉下划线。并更改标签点击样式。效果如下图所示,我们的头部导航栏就完成了。

1477900313656523.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365308.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Arctext.js - 基于 CSS3 jQuery 的文本弯曲效果

Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路径排布相当的复杂,结合 Arctext.js 则可以轻松实现这个效果。…

在JDT中使用Java 8 Lambda

旧 Curmudgeon 认识Smalltalk的Dude 在修改Eclipse Java开发工具 (JDT)项目正在开发的Java 8支持时,我一直在使用这种语言。 我承认我对Java 8中的lambda有点不满意。 当然,这来自于知道Smalltalk (和LISP / Schem…

zabbix邮件告警

zabbix邮件告警调用第三方邮件服务来发送邮件。 [roottiandong ~]# yum install mailx -y 修改配置文件 [roottiandong ~]# vim /etc/mail.rc 67 set from15600857257163.com smtpsmtp.163.com 68 set smtp-auth-user15600857257163.com 69 set smtp-auth-password密码&#xf…

SweetAlert – 替代 Alert 的漂亮的提示效果

Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择,可以灵活控制。 在线演示 插件下载 您可…

onpagefinished等了很久才执行_今天自律了吗?停课不停锻炼 才是战疫正确姿势

近日,中青校媒面向全国915名高校学生发起关于“宅家运动”情况的调查,发现15.39%被调查者在家期间会严格执行锻炼计划,39.96%选择间歇性完成制订的运动目标,还有44.65%在家很少运动。(3月18日《中国青年报》)新冠肺炎疫情发生&…

Ocrad.js – JS 实现 OCR 光学字符识别

Ocrad.js 相当于是 Ocrad 项目的纯 JavaScript 版本,使用 Emscripten 自动转换。这是一个简单的 OCR (光学字符识别)程序,可以扫描图像中的文字回文本。 不像 GOCR.js,Ocrad.js 被设计成一个端口,而不是围绕…

Sequence.js 实现带有视差滚动特效的图片滑块

Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果。让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。…

开源JVM Sampling Profiler

众所周知 ,大多数现有的采样Java Profiler都必须在安全的地方进行堆栈跟踪收集。 诸如采样探查器之类的探查器就是这种情况,它使用SUN / Oracle管理代理来收集其堆栈跟踪。 这种方法的问题在于,由于不是程序中的每个点都不是安全点&#xff0…

雷霆战机

前言 多年前,你我在一起"打飞机"。为了实现真正的打飞机,在下一年前踏足帝都学习了无所不能的Python,辣么接下来带你在俩个小时用200行代码学会打飞机。 python中提供了一个pygame的模块能够让我们快速编写一个游戏。接下来&#x…

FancyBox - 经典的 jQuery Lightbox 插件

FancyBox 是一款非常优秀的弹窗插件,能够为图片、HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果。作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能。主要特色: ✓ 能够显示图片、HTML 元素、SWF 影片、ifra…

php如何表格中的变为超链接,php中将网址转换为超链接的函数

php中将网址转换为超链接的函数复制代码 代码如下:function showtext($text){$search array(|(http://[^ ])|, |(https://[^ ])|, |(www.[^ ])|);$replace array($1, $1, $1);$text preg_replace($search, $replace, $text);return $text;}时间: 2011-08-311.根据…

Java面试参考指南–第1部分

JAVA面向对象的概念 Java基于面向对象的概念,它允许更高级别的抽象以实际方式解决任何问题。 面向对象的方法将实际对象中的问题解决方案概念化,从而更易于在整个应用程序中重用。 例如椅子,风扇,狗,电脑等。 在Java…

Odyssey.js – 使用现成模板在线创建互动的故事

Odyssey.js 是一个开源工具,它可以让你的地图,叙述和其他多媒体结合成一个美丽的故事。创建新的故事很简单,要求无非是一个现代的 Web 浏览器和一个好的想法。你可以使用现成的模板来控制和设计精美的布局,让你的故事的整体外观和…

100层楼扔两个鸡蛋的问题

转载自:http://blog.sina.com.cn/s/blog_6c813dbd0101bh98.html 两个软硬程度一样但未知的鸡蛋,它们有可能都在一楼就摔碎,也可能从一百层楼摔下来没事。 有座100层的建筑,要你用这两个鸡蛋确定哪一层是鸡蛋可以安全落下的最高位置…

酷毙了!三种风格的全屏幻灯片效果【附源码下载】

今天,我们想向您展示如何创建平铺背景图像的幻灯片效果。其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看。 这个幻灯片效果是由四个区域的独立移动构成,通过画面…

西游之路——python全栈——CRM项目之表结构设计

一、表结构设计 1 from django.db import models2 from django.contrib.auth.models import User3 4 """自带验证"""5 class UserProFile(models.Model):6 """用户信息表"""7 user models.OneToOneField…

你见过吗?9款超炫的复选框(Checkbox)效果

复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使…

实用技巧:使用 Google Analytics 跟踪 JS 错误

Google Analytics(谷歌分析)不仅仅是一个流量统计工具,你还可以用它来测量广告活动的有效性,跟踪用户多远到所需的页面流(从点击广告到购物车到结账页面)获取,并基于用户的信息设置浏览器和语言…

从Ubuntu 14.04 LTS版升级到Ubuntu 16.04 LTS

Ubuntu 16.04 (Xerial Xerus) Long Term Support版于最近发布了。要想了解它的新功能和新特性,就必须升级或安装这个新系统。 本文讲述怎样一步步从Ubuntu 14.04 LTS版升级到Ubuntu 16.04 LTS版。要注意在升级前做好重要数据的备份,以免造成数据损失。因…

HTML5 Dashboard – 那些让你激动的 Web 技术

HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术。每一项技术都有简洁,在线演示以及详细的文档链接。这些技术将成为未来一段时间 Web 开发的顶尖技术,如果不想落伍的话就赶…