教您如何制作一个简单的学习网

hello,大家好,我是一个刚学习没多久的CSS程序员(目前好像还不是哈)。


继续往下看,你会被我征服的~

自从学了javaCSS头发掉的也不快了,但是唯一的缺点,我****视频太多了,惹不起惹不起。

关于制作一个简单的学习网操作

1.准备html和一个图片文件

2.准备CSS样式

3.确定版心(是1200像素)和各个模块。

学习网分析

定位

如果,说浮动,关键在一-个“浮”字上面,那么我们的定位,关键在于-一个“位”上。

下面代码复制上

代码:

标题名称

这个我是弄的顺丰快递     <title>顺丰快递</title>

搜索框部分

/*搜索框部分*/

.search{

width: 410px;/*360+50*/

height: 38px;

border: 1px solid #00a4ff;

float: right;

}

.search input[type=text]{/* 属性选择器,type为text的文本框*/

width: 350px;

height: 35px;

float: left;

}

.search input[type=submit]{/* 属性选择器,type为text的文本框*/

background-color: pink;

width: 42px;

height: 42px;

background-color: #00a4ff;

float: left;

background: #00a4ff url(images/搜索框.png) center center no-repeat;

}

背景就是中间那个大图哦~

.banner-in{

height: 420px;

background:pink url(链接存放地方) no-repeat 0 0;

}

导航栏

就是图片中的运单追踪、我要寄件、运费时效查询、服务网点查询、收寄范围查询这一些

.slidebar li a { /*左边导航栏样式*/

color: #000;

font-size: 16px;

font-family: "宋体";

  padding-left: 10px;

  /*a是行内元素,没有大小需要转换*/

  display: block;

  height: 45px;

  line-height: 45px;

  margin-top: 5px;

}

关于头部代码

首页、物流、服务支持、关于我们、联系我们这些是根据你网站是什么类型的,比如我这里就是物流

<div class="navbar"><!-- 头的内容 -->

    <ul>

    <li><a href="#">首页</a></li>

    <li><a href="#">物流</a></li>

    <li><a href="#">服务支持</a></li>

    <li><a href="#">关于我们</a></li>

    <li><a href="#">联系我们</a></li>

    </ul>

小课程

这些可以自行设置哦!

<!-- 小课表部分 -->

  <d1 class="timetable">

    <dt>顺丰快递</dt>

    <dd><h4>冷运服务</h4>

    顺丰拥有强大的管理系统

    </dd>

    <dd>

    <h4>快递服务</h4>

    顺丰会满足客户需求。

    </dd>

    <dd>

    <h4>仓储服务</h4>

  顺丰拥有很大的仓库

    </dd>

  </d1>

关于logo

<div class="logo">

  <img src="链接" alt="">

  </div>

第一次写尽力了,你的收藏是我的动力~

                                在下给各位卖一个萌~看看多可爱

                                                                                     2019年12月6日

                                                                                        热爱java的小董

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容