【个人网站设计】【1】_个人页面设计

1.我的首页页面设计

• 步骤

1.创建.index的文件，用软件打开编辑。

2.创建一个div块级标签，其中存放三个子div。

3.第一个块，插入背景大图片在最底层。在顶层上插入自己logo图片设置css圆形展示效果。编辑艺术字“Hi, I’m SunDan.”。添加一个链接按钮，跳转到第二个块。

4.在第二个块中，顶部设置导航条总共10个模块，实现点击时颜色显现变亮效果。文字部分打招呼简介并作出相应的艺术效果。添加返回顶部和和我联系的按钮。最后添加四个css样式学校，并加上超链接可直接导航到该学校首页。

5.最后一div里插入左右两个div分区，左边用于社交平台联系方式，右边用于号码文本地址的直观展示。最后分割线，写署名。

效果图如下：

 

CSS代码如下：

*,
*::before,
*::after {
  box-sizing: border-box; }
 
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent; }
 
@-ms-viewport {
  width: device-width; }
 
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }
 
body {
  margin: 0;
  font-family: Inconsolata, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #343a40;
  text-align: left;
  background-color: #ffffff; }
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }
  @media (min-width: 576px) {
    .container {
      max-width: 540px; } }
  @media (min-width: 768px) {
    .container {
      max-width: 720px; } }
  @media (min-width: 992px) {
    .container {
      max-width: 960px; } }
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px; } }
 
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }
 
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }
.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #f8f9fa; }
 
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #495057;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0; }
  .dropdown-item:focus, .dropdown-item:hover {
    color: #212529;
    text-decoration: none;
    background-color: #f8f9fa; }
  .dropdown-item.active, .dropdown-item:active {
    color: #ffffff;
    text-decoration: none;
    background-color: #000000; }
  .dropdown-item.disabled, .dropdown-item:disabled {
    color: #868e96;
    background-color: transparent; }
 
.dropdown-menu.show {
  display: block; }
 
.dropdown-header {
  display: block;
  padding: 0.75rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #ced4da;
  white-space: nowrap; }
.list-inline {
  padding-left: 0;
  list-style: none; }
 
.list-inline-item {
  display: inline-block; }
  .list-inline-item:not(:last-child) {
    margin-right: 0.5rem; }

 

2.我的简历页面设计

1. 效果图

• 步骤

1.插入一个表格<table>，标题为个人简历，确定为15行7列。

2.设置表格<table border="0" align="center" width="100%" cellpadding="2" cellspacing="0">。

3.分别在各个单元格添加文本。其中，“毕业学校”，“起止年月”，“就读学校”，“专业课程”，“工作单位”，“职责”水平合并两个单元格，“照片”，“学习经历”，“工作经历”垂直合并 4个单元格，“求职意向”合并6个单元格。

3、我的爱好页面设计

1. 效果图

 

1. 步骤

1.添加一个div块，里面存放3个div。

2.第一个div，通过树形菜单的形式来展现歌单集。

  首先使用项目列表制作一个完整的属性菜单；

  然后使用带参数的函数，通过参数来控制显示或隐藏某个列表。

3.第二个div，利用所学知识完成扑克牌翻转效果。

  ①插入一个包括图片和文字的简单页面结构。

  ②在style样式里设置变换。

首先，将变换的元素（图片和文字）放在四个父容器；

其次，每个父容器包括上面的图片和下面的说明文字；

最后，采用层定位让图片和文字出现叠加效果。

     4.第三个div，添加图片，height="280" width="180"，设置播放图片文件夹，设置首张图片。使用循环函数调用循环展示所有书籍图片，每次展示的时间间隔1秒。

CSS代码：

#piclist{  width:760px; height: 220px;margin: 30px auto;}
.picbox{ float: left; position: relative; width: 300px; height: 200px;
margin: 10px; transform-style:preserve-3d; transition:1.5s;}
.picbox:hover{ transform:rotateY(180deg);}
.face{
	position: absolute;
	width: 300px;
	height: 200px;
	top: -5px;
	left: -12px;
}
.front{ border:2px solid #4b2518;}		
.back{ transform:rotateY(180deg); background-color: #4b2518; border:2px solid #fff;}
.back h3{color:white; text-align:center;}
.icon-box {
  position: relative;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background-color: #f8f9fa;
  margin: 1rem; }
  .icon-box .icon-box-inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    padding: 3.25rem; }
    .icon-box .icon-box-inner:hover {
      -webkit-transform: translateY(-1px);
              transform: translateY(-1px);
      transition: all .4s ease-in-out; }
    .icon-box .icon-box-inner.small {
      padding: 1.25rem; }

5、给我留言页面设计

1. 效果图

 

1. 步骤

1.设置好留言板中每个输入框的位置大小。

2.当点击提交按钮时，检验称呼不为空；检验手机号码；检验邮箱正确格式；检验网址正确格式等。

3.获得点击图片随机切换地验证码并进行验证。

  1>在全局定义验证码，定义验证码的长度，定义随机数

2>添加循环操作

3>校验验证码

CSS代码：

#code{ 
      font-family:Arial,宋体; 
      font-style:italic; 
      color:green; 
      border:0; 
      padding:2px 3px; 
      letter-spacing:3px; 
      font-weight:bolder; 
}
    .form-inline .form-group {
      display: -ms-flexbox;
      display: flex;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-align: center;
          align-items: center;
      margin-bottom: 0; }
.form-control {
  display: block;
  width: 100%;
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 2px solid #f8f9fa;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }