基础复习(京东静态页面的实现)第一天

一、前言

    作为一个技术小白决定记录下自己前端学习过程的点点滴滴,欢迎各为大神轻喷!

二、引入

    前端最为基础的就是Html、css、js,为了巩固并且加强自己的基础所以挑选出了京东的静态页面作为这三天的复习内容!在第一天中我首先完成的是页面的快速导航、头部广告、搜索栏三个基础页面!

三、重点内容

  ㈠ 开发前的准备工作:

   在开始一个完整的项目之前首先要做的并不是着急的去写代码,完成项目前的准备工作。项目的准备工作可以分为以下几个部分

    ① 配置开发环境     ② 建立项目文件夹     ③css文件的样式初始化     ④ 分析网站的构成

  ㈡ css样式书写的位置:

    css作为页面的"衣服"当然有他特定的"衣柜"。而"衣柜"的不同就存在着一定的优先级的问题!

     ① 行内式:

              <div style="font-size: 12px"></div>

     ② 外链式:

              <head lang="en">
                  <meta charset="UTF-8">
                  <title></title>
                  <link rel="stylesheet" href="css/base.css"/>
              </head>

     ③ 内嵌式:

              <style>
                  input {
                      outline-style: none ;
                  }
                  textarea {
                      resize: none;
                  }
              </style>

    除了这三种的样式之外还有一种基本不怎么用的样式叫做导入时,因为出现次数很少所以不予以记录。而且这三种样式也有着一定的优先级

     内嵌式>行内式>外链式

  ㈢ 通栏、版心的概念以及意义:

   ① 通栏是指和一个整版宽度相同、但是面积不到半个版的排版方式。

   ② 版心:

        概念:是页面中主要内容所在的区域。即每页版面正中的位置,又叫节口。

        意义:因为我们的屏蔽设备的分辨率不一样吧,因此 显示网站的风格有可能不一样的,为了提高用户的体验,将网站的显示风格统一起来,因此需要给网站设置一个版心

  ㈣ 定位的使用:

   在css一共有着四种定位的方式:

    ① 固定定位:不占位、脱标、定位以浏览器为基础(position:fixed)

    ② 绝对定位:不占位、脱标、父元素有定位以父元素为基础否则以浏览器为基础(position:absolute )

    ③ 相对定位:占位、不脱标、相对于原来标准流里面的位置(position: relative)

    ④ 静态定位:占位、不脱标、没有效果(position:static)

      需要注意的是,在定位一直有着一个口诀叫做"子绝父相"其含义是子元素是绝对定位的时候,父元素是一个相对定位,那么父级元素是给子元素设置范围的作用。但是如果是三个元素之间的嵌套的话不一定要遵守这个口诀了。定位首先是先找离自己最近的父级元素进行的一个定位,如果父级元素没有定位或是相对定位的话,默认是以浏览器或是文档的左上角为准,如果父级元素有相对定位或是绝对定位的时候,以父级元素的左上角为准。

  ㈤ 权重的问题

    在css样式的书写的过程中有发现设置的样式没有被实现,而在浏览器中查看的时候显示的被贯穿线贯穿。这个时候很有可能出现的问题就是权重较低而别覆盖。那么根据选择器的不同也就会导致权重的不同,下面就是选择器的权重优先级

    标签选择器< 类选择器<id选择器<行内样式<!important

            

  ㈥ Fw的使用以及font复合属性

    Fireworks是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性,

    还提供了一个预先构建资源的公用库。熟练的使用Fw也是一个基础小白应该做到,其中几个最重要的快捷键如下:

     ① I 滴管工具 吸取颜色  ② K  切片工具  量取元素的宽度  ③ Z  放大镜工具  ④ V  移动  ⑤A  指针工具

    font符合属性用于简写属性在一个声明中设置所有字体属性。按顺序可设置如下属性:

     ① font-style 字体的样式  ② font-variant 字体的异体  ③ font-weight 字体的粗细  ④ font-size/line-height字体的尺寸和行高  

     ⑤ font-family 字体的系列样式

四、总结

    学习是个循序渐进的过程不进则退,在今天需要掌握的主要内容已经如上所列(没有基础的请参照w3c的Html,css基础)。

五、效果图

时间: 2024-08-02 15:14:01

基础复习(京东静态页面的实现)第一天的相关文章

京东静态页面第一天

书写页面前的准备 1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护 包括与项目相关的一些文件 主页或是首页    index.html   default.html Css文件夹    css文件的 Base.css     global.css Images文件夹  用来放置网站中的所有的图片Js文件 音频或是视频文件 3. 样式初始化 我们的结构中的标签都有默

基础复习(京东静态页面的实现)第二天

一.前言 经过第一天的练习后完成的页面的快速导航.顶部广告.搜索栏今天将继续完成下面的页面. 二.引入 在一般的情况下页面是从左到右,从上到下依次进行布局的.可是由于可以将通用的样式封装以便于后面的使用所以今天我们完成页面的最下面部分. 三.重点内容 ㈠ 相邻行内块元素的间距问题 在布局的时候,相邻的行内块元素之间默认有几像素的外间距.只能用浮动来解决这个问题. ㈡ Border-radius: 边框半径 这是CSS3的一个新属性,其作用是向元素添加圆角边框.他一共有四个值:左上 左下 右上 右

仿京东静态页面

运用到的知识点儿:css sprites,css reset,定位,margin负值的妙用,tab选项卡,轮播图,jquery插件开发... css sprites: css reset:统一每个浏览器默认的样式 定位:购物车上的小红图标,以及直降图标 margin负值的妙用:溢出隐藏,边框隐藏,左右结构 左右结构都有左边框,但是因为超出夫容器,设置溢出隐藏,使得左边边框被隐藏 tab选项卡:特价商品 轮播图: <!--index.html --> <!DOCTYPE html>

京东静态页面第二天

第二天完成情况 只做了jd网页的顶部和底部的共同部分 今天所涉及的内容的介绍 1.1  开发前的准备工作 1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护 包括与项目相关的一些文件 主页或是首页    index.html   default.html Css文件夹    css文件的 base.css     global.css Images文件夹  用来放置

京东静态页面目录

效果图: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title> <link

WEB页面采集器编写经验之一:静态页面采集器

严格意义来说,采集器和爬虫不是一回事:采集器是对特定结构的数据来源进行解析.结构化,将所需的数据从中提取出来:而爬虫的主要目标更多的是页面里的链接和页面的TITLE. 采集器也写过不少了,随便写一点经验吧,算是给自己的一个备忘. 首先是最简单的:静态页面采集器.即所采集的数据来源页面是静态的,至少采集器所关心的那部分数据是静态的,可以通过直接访问页面URL的方式获取到包含目标数据的全部页面代码.这种采集器是最为常用,也是最为基础的.目前已经有很多成熟的商业化的采集器产品,不过对我来说感觉用着有些

浅谈php生成静态页面

一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权限限制等,但是,对应一些我们经常频频使用的文件,比方说,开发的新闻发布系统,我们不希望很多用户都读取数据库才显示结果,这样一方面消耗了服务器的资源,另一方面占去了浏览者大量可贵的响应时间,所有,有了"静态页面话"的做法,当前很多网站都采用这种技术,一般都是由管理后台控制,或者生成html直

[freemarker篇]02.生成HTML的静态页面

昨天完成了一部分的今天在上次的基础上,完成完成生成HTML静态页面的操作,中间会涉及一点标签的简单使用.今天的代码有一丢丢的对付的感觉!抱歉了,直接就上代码吧!求原谅! 项目结构目录如下: 第一步,新建一个类com.shxt.model.User package com.shxt.model; public class User { private String account; private Integer age; public User() { } public User(String

C#语言和数据库技术基础复习

整理了下C#语言和数据库技术基础,作为复习资料 第一章 一.c#和JAVA对比:1.c#用命名空间(namespace)java用包(package) 2.引入命名空间或包的关键字C#用using,JAVA用import 3.程序入口:C#的Main()有四种形式static void Main(string[] args) static int Main(string[] args) static void Main() static int Main() JAVA的MAIN()有一种形式 4