品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电商网站,我们要完成首页.列表页.详情页.注册页面的制作 2. 项目背景 现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需要的技术也是较为复杂 的, 复习.总结.提高前面所学布局技术. 3. 设计目标 保证浏览器 ie7及以上, 火狐, 360, safari,chrom…
1. 品优购项目(四) 1). 详情页 detail.html 常用单词 名称 说明 主体 de_container 面包屑导航 crumb_wrap 产品介绍 product_intro ( introduction介绍) 预览包 preview_wrap(左侧部分) 预览缩略图 preview_img 预览列表 preview_list 左按钮 arrow_prev 右按钮 arrow_next 小图列表 preview_items 产品详细信息区域 itemInfo_wrap (右侧部分)…
品优购项目(三) 1. 首页制作 1). 楼层区 floor 注意这个floor 一个大盒子 包含, 不要给高度,内容有多少,算多少 2). 家用电器模块 这个模块 简单 不需要写样式 版心居中对齐 因为这些模块 基本相同,下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是: 1号盒子 box-hd 给一个高度, 有个下边框 里面分为左右2个盒子 2号盒子 box-bd 不要给高度. 3). box-hd 模块 有高度 左边 h3 盒子 右边 div 命名为 tab-list 因为用到…
品优购项目(二) 1. 品优购首页布局 命名集合: 名称 说明 快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwrods 导航 nav 导航左侧 dropdown 包含 .dd .dt 导航右侧 navitems 页面底部 footer 页面底部服务模块 mod_service 页面底部帮助模块 mod_help 页面底部版权模块 mod_copyright 1). nav 导航栏制作 nav 盒子通栏有高度 而且有个…
1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了. 1.1 排版标签 排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签. 1)标题标签h (熟记) 单词缩写: head 头部标题 title 文档标题 为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标…
表格 table(会使用) 为了让我们页面显示的更加整齐,我们需要学习三个表(表格.表单.列表) 理解: 能说出表格用来做什么的 表格的基本结构组成 表格作用: 存在即是合理的. 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示.展示表格式数据. 因为它可以让数据显示的非常的规整,可读性非常好. 特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理 ,虽然 div 布局也可以做到,但是总没有表格来得方便. ps: 这些地方用表格,你会觉…
1. HTML 初识 HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言. HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) html作用 网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了. 所谓超文本,有2层含义: 1.因为它可以加入图片.声音.动画.多媒体等内容(超越文本限制) 2.不仅如此,它还…
认识WEB 1.认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 思考: 网页是如何形成的呢? 总结 网页有图片.链接.文字等元素组成,我们后面的任务就是要把这部分网页元素用代码写出来. 2. 浏览器介绍 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome).Safari和Opera等.我们平时称为五大浏览器. 2.1 查看浏览器占有的市场份额 查看网站:http://tongji.bai…
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二.三角 代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&…
软件安装 VSCode软件 能够安装 VS Code 能够熟练使用 VS Code 软件 能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器,支持几乎 所有主流 的开发语言的语法高亮.智能代码补.GIT 等特性,支持插件扩展等等. 推荐理由 比 sublime 开源,比 webstorm 更轻 智能提示很强大 自带 emme…