search

qiang-gao-cn / exercise

my repository for exercise
0 stars 0 forks source link

鞍山培训 #2

Open qiang-gao-cn opened 5 years ago

qiang-gao-cn commented 5 years ago

这个issues包含所有培训的练习要求，计划，练习结果代码等；

qiang-gao-cn commented 5 years ago

20190111： 页面：京东头部（logo一行以上部分，logo不添加，二维码不添加，签到不添加） 说明：数字1到5就是步骤，里边html表示需要的标签及格式；css要求中1到5为步骤1到5必须添加；而自己发挥css样式要求为样式根据自己要求可以选择是否添加，添加后的值也是自己决定；样式float=left表示样式float的值为left； html要求：标签 div ul li p 图片改为div加背景色 1：html：div width=100% height=80px 2：html：div width=100% height=30px ul li 北京 li 你好，请登录 免费注册 li 我的订单 li 我的京东 li 京东会员 li 企业采购 li 客户服务 li 网站导航

3：html： div div width=500px height=35px border=1px div width=50px height=35px bgcolor=red div width=190px height=35px 我的购物车 4：div ul li 我的订单 li 我的订单 li 我的订单 li 我的京东 li 京东会员 li 企业采购 li 客户服务 li 网站导航

5：div ul li 我的订单 li 我的订单 li 我的订单 li 我的京东 li 京东会员 li 企业采购 li 客户服务 li 网站导航

css要求： 1：background=blue 2：li float=left 3：div div float=left 4：li float=left 5：li float=left

自己发挥css样式要求：margin pading margin-left margin-top margin-right margin-bottom padding-left padding-right padding-top padding-bottom default font-size：14px 最大font-size：24px 最小font-size：12px backgrond：red blue yellow orange pink; text-align：left right center; line-height=div的高

结果： 马永华已成功制作计划要求；制作出京东头部类似的结构； 问题总结：

  1. 内部样式和内联样式style标签放的位置不对；这是html固定框架结构不清楚原因；
  2. margin和padding属性及相关属性，比如margin-left；属性的作用不了解；
qiang-gao-cn commented 5 years ago

练习页面：http://www.w3school.com.cn/cssref/index.asp 步骤：

1. body => style=background:lightgray;margin:0;padding:0;list-style-type:none;
2.
html:
  div class=headers
    div class=head_left
    div class=head_right
css:
    .headers => style=width:100%;height:100px;
    .head_left => style= width:50%;height:100px;background:red;float:left;
    .head_right => style= width:50%;height:100px;background:blue;
3.
html:
  div class=menu
    ul
      a href=#
        li 参考手册
      a href=#
        li 参考手册
      a href=#
        li 参考手册
      a href=#
        li 参考手册
      a href=#
        li 参考手册
      a href=#
        li 参考手册
css:
  .menu => style=font-size:22px;
  .menu ul a li => style=float:left;height:48px;width:15%;text-align:center;line-height:48px;
  .menu ul a:hover li => style=background:#900b09;color:white;
4.
html:
  div class=content
    div class=left
      div class=classes
      div class=labels
        ul
          a href=#
            li 参考手册
          a href=#
            li 参考手册
          a href=#
            li 参考手册
          a href=#
            li 参考手册
    div class=maincontent
      div class=titles
        h2 = CSS参考手册
      div class=turnPage
        input type button value=上一页
        input type button value=下一页
      div class=shuoming
        h4 =  W3School 的 CSS 参考手册定期通过所有主流浏览器进行测试。
      div class=content1
        h3 = CSS属性
        h4 = CSS 属性组：
        ul
          a href=#
            li 参考手册
          a href=#
            li 参考手册
          a href=#
            li 参考手册
          a href=#
            li 参考手册
   div class=right
      div class=right1
        h3 = 工具箱
        input type=button value=参考书
      div class=right2
        h3=barnner
        img src=http://dco-assets.everestads.net/iCornerStore/source-images/MICROSOFTSTORE/current/0797363975306f57874a9250276f0686.png

css:
  .left => style=float:left;
  .content => style=width:180px;
  .classes => style=width:100%;height:35px;background:gray;
  .menu ul a li => style=height:30px;width:100%;text-align:center;line-height:30px;
  .menu ul a:hover li => style=background:red;color:white;
  .maincontent => width:850px;float:left;height:auto;

  .content1 ul a li => list-style-type:square;
  .content1 ul a:hover li => style=background:yellow;color:blue;list-style-type:square;

  .right => style=width:165px;height:auto;
  .right1 input => style=width:100px;height:50px;
  .right2 img => style=width:160;
qiang-gao-cn commented 5 years ago

文字描述：

问题总结： 1：虽然自己已经做出页面的设计图；但是，在编写代码时或出现书写格式不系统，导致页面到不到理想的效果； 2：对于css样式的调整会差些；各种样式的搭配还不太熟悉；

qiang-gao-cn commented 5 years ago

页面参考：https://www.glass.cn/c_asyylgs/

整体结构从上到下分为七部分，整体居中显示，宽度为950px：

链接内容为 “欢迎您![登录][免费注册]”；采用左浮动；head_right设置无序列表，进行右浮动；列表li的右边框大小为1px，颜色为gray，内容不限，li从左到右显示，例如导航栏；