梅兰商贸总结

一.开发前的准备

1. 配置开发环境(sublime)

2. 建立项目文件夹

    首页     index.html

    Css文件夹 index.css      base.css

    图片文件夹 images

    Js文件夹 js文件

3. Css初始化

  因为html中的标签都有各自的默认样式,为了布局的稳定性和统一成我们自己想的风格,因此需要将这些标签默认的样式统统去掉。

4. 分析网站构成(写代码)

二.布局中所遵循的规范或是通例

   一般是遵循从上到下,从左到右的一个顺序。就从页面的稳定性上来说,优先考虑使用标准流,其次才考虑浮动或是定位。

   遵循标准流的元素中,又以宽高最稳定,先把大的框架实例化出来,再进行细节的布局。能用padding的优先考虑padding(内边距),其实才考虑margin(外边距)。如果没有margin的边距合并或是共享的问题话,也是可以比较愉快的使用margin的。

   我们网页的布局其实就像是在搭积木。将一块块的盒子组合在一块,使其呈现一个漂亮的页面效果。Html中任何一个元素都可以看成一个盒模型,都有宽高,内外边距。但行内元素的宽高不起作用,只有块级元素的宽高有效。行内元素的左右边距是起效果的。为了让行内元素也可能拥有宽高,可以有两种办法:

  第一种是让行内元素转换成块级元素或是行内块元素,代码如下:

    display: block,      display: inline-block

  第二种是给行内元素添加浮动或是定位,浮动或是定位了的元素脱离标准流的控制了,就会自动的拥有宽高的效果。

    用到的块级元素有: div, p, ul,li,dl,dt,dd,h2,h3

    用到的行内元素有: span,a,del,

    用到的行内块元素有:img,input,button 注意行内块元素相邻排列默认有几像素的间距,只能通过浮动解决这个问题。

    

三 盒模型

  每一个盒模型都有上右下左四个方向的值,比如

  border: 20px;  就好比是:

  border-top: 20px;    border-right: 20px;    border-bottom: 20px ;   border-left: 20px;

  padding: 30px;   就好比是:

  padding-top: 30px;   padding-right: 30px;    padding-bottom: 30px;    padding-left: 30px;

  margin:  40px;  就好比是:

  margin-top: 40px;    margin-right: 40px;    margin-bottom: 40px;   margin-left: 40px;

  如果我要写: margin: 0  10px;  就好比是:

  margin-top: 0;  margin-bottom: 0;   margin-right: 10px;   margin-left: 10px;

  如果我要写: margin: 0  10px 20px;  就好比是:

  margin-top: 0;   margin-right: 10px;  margin-left: 10px;  margin-bottom: 20px;

  

  宽高300px*400px的意思是:

  width= 内容的宽width(200)+左右内边距padding(30*2)+左右边框(20*2)

  height= 内容的高height(300)+上下内边距padding(30*2)+上下边框(20*2)

四 选择器

  基本选择器:

    标签选择器,id选择器,类选择器,通配符选择器

  复合选择器:

    标签指定式,并集选择器,后代选择器,综合选择器

  4.1 标签指定式选择器(交集选择器):

    标签名+ID名或者类名{属性名:属性值;属性名:属性值;}

    应用场景:不同标记上有同样的类名 例

    

  4.2 选择符分组(并集选择器):

     用法:选择器,选择器,选择器{属性名:属性值;属性名:属性值;}

    

    

  4.3 后代选择器(包含,派生,嵌套):

    父级选择器 子级选择器 孙级选择器{属性名:属性值;属性名:属性值;}

    

    

  4.4综合选择器  各种选择器的结合使用。

  h1,li.one span,.two,#one_1{color:red;font-size:36p;background:#FC0;}

    标签,后代,选择符分组(并集选择器),标签指定式(交集选择器)

 五  复合属性  font   background

    font:

  可以按顺序设置如下属性:

font-style (使用斜体、倾斜或正常字体)

font-variant (设置小型大写字母的字体显示文本)

font-weight (设置文本的粗细)

font-size/line-height (设置字体的尺寸和行高)

font-family (规定元素的字体系列)

  body{  font: italic     small-caps    bold      14px/24px    "microsoft yahei";}

  字体:   斜体    小型大写字母   粗体    14号大小/24像素行高       微软雅黑

  可以不需要每个都写,但是顺序还是要的。再简写,也至少包括两个,就是字体大小 和字体样式。

     background:

  css2中有五个与背景相关的属性。它们是:

  background-color:完全填充背景颜色

  background-image:用作背景的图片

  background-position:确定背景图片的位置

  background-repeat:确定背景图片是否重复

  background-attachment:确定背景图片是否随页面滚动

    简写:

  background: 颜色   图片   是否平铺   位置  是否滚动

时间: 2024-11-05 06:26:04

梅兰商贸总结的相关文章

梅兰商贸

梅兰商贸首页 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="梅兰css.css">

cocos2dx 制作单机麻将(六)

当项目做到这时, 会发现项目结构不是太美. 如果接着按照这样面向结构的方式写的话, 就会非常的乱. 这章我们来讨论如何用面向对象的方式写麻将. 标准的麻将(联网的) 会分为服务器模块, 客户端模块, 逻辑模块. 服务器模块必须由逻辑模块支持, 客户端模块很少用到逻辑模块,大多是从服务器发来的判断结果,必要时还是会用到逻辑模块. 因为逻辑模块需要共用, 所以里面都是调用的接口,返回服务器和客户端需要的结果值. 举个例子 客户端触发开始发生给服务端 > 服务端开始游戏 > 通过逻辑模块得到整理好的

一站到底题库

一站到底题库 bella 来自: bella(要有强大的内心) 2012-11-09 13:10:12 文学常识 1. 第一位女诗人是:蔡琰(文姬) 2. 第一部纪传体通史:史记 3. 第一部词典是:尔雅 4. 第一部大百科全书是:永乐大典 5. 第一部诗歌总集是:诗经 6. 第一部文选:昭明文选 7. 第一部字典:说文解字 8. 第一部神话集:山海经 9. 第一部文言志人小说集:世说新语 10. 第一部文言志怪小说集:搜神记 11. 第一部语录体著作:论语 12. 第一部编年体史书是:春秋 1

cocos2dx 制作单机麻将(五)

麻将逻辑6 最基础的4人麻将逻辑(轮流循环出牌, 之前学的都能用上  跑起来了!!!) 最基础的麻将逻辑 依据自己须要 设置麻将人数GAME_PLAYER 基本流程: 初始化牌堆, 推断庄家 玩家0摸13张牌 玩家1摸13张牌 玩家2摸13张牌 玩家3摸13张牌 庄家摸一张牌 庄家出牌 闲家摸牌 闲家出牌 闲家摸牌 闲家出牌 闲家摸牌 闲家出牌 庄家摸一张牌 庄家出牌 闲家摸牌 闲家出牌 ....... 牌堆数为0 结束 其它功能 比方 碰吃杠听胡等等 先不实现 代码不难,非常easy看懂 //

【诗歌系列】《神曲》

原文地址:http://www.jianshu.com/p/a04d17b3f6fe 本文地址:http://www.cnblogs.com/aiweixiao/p/7258405.html 01 意起 — 人生思幼日 微风燕子斜的清晨,并无往常的阳光丁达尔,袅袅炊烟的乡村,绿色青得逼你的眼.曾午间大睡,偷吃钱换的板蓝根,清新甜味,悠远心间.也傍晚黄昏期盼,新奇动画里的刀光世界.终成望子成龙殷切之期望. 神曲·意起-人生思幼日 丰收秋季里,肃杀和鹰击共存,秋水天一色的想象留给了白雪皑皑的冬季,他

Web前端与移动开发学习路线图

文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.baidu.com/s/1nv0OMuP 密码: ipf9 好东西岂能独享,欢迎分享到你的朋友圈,推荐给更多的朋友.欢迎关注公众号,订阅视频更新,好视频岂容错过. step01初级教程 前端与移动开发基础视频 本套视频内容重点讲解Web前端基础知识,主要包含了用来定义页面内容的HTML,用来定义页面样式

IT基础架构规划方案二(计算机系统与机房规划规划)

计算机系统规划       服务器硬件选型规划方案       根据对某集团的实际调研,获取了企业业务应用系统的建设情况,随着企业信息化建设的推进,需要对各种信息化管理系统和应用系统的服务器选型进行选型规划,根据不同的系统对服务器硬件的性能指标要求不同,比如企业网站服务器.邮件服务器.域控制服务器.文件和打印服务器.业务系统服务器等,通过结合系统在线用户数.业务请求数和业务产生的事物数等参数来计算tpmC值,从而估算出服务器硬件的性能要求. tpmC定义为TPC-C的吞吐量(TPC-C Thro

cocos2dx 制作单机麻将(三)

麻将逻辑4.得到手牌数据 我们已经保存了一个一维数组, 类似于一个表格,统计出所有牌对应的数量, 但我们怎样得到当前手中是什么牌呢 //扑克转换 BYTE SwitchToCardData(BYTE cbCardIndex[MAX_INDEX]/*传入统计所有牌数量的表格*/, BYTE cbCardData[MAX_COUNT]/*传出手牌数据*/) { //转换扑克 BYTE cbPosition=0; for (BYTE i=0;i<MAX_INDEX;i++) { if (cbCardI

cocos2dx 制作单机麻将(四)

麻将逻辑5.模拟出牌 // // main.cpp // MajiangLogicTest // // Created by TinyUlt on 14-8-16. // Copyright (c) 2014年 TinyUlt. All rights reserved. // #include <iostream> using namespace std; #define MAX_REPERTORY 144 typedef unsigned char BYTE; typedef unsigne