2018/11/7

1. E-commerce web page layout analysis, file deployment, and the use of Favicon. ico icon: Put it in the root directory of the site and pass

<link rel="shortcut icon" href="facicon.ico">
Copy the code

Introducing, the position is undefined. Homemade PNG images can be converted to Favicon.ico ICONS using Bitbug.net.

2. Website optimization (SEO) three tags: title (28),description (128),keyword (6-8). It has to be written and it has to follow certain rules. 3. Determine the size of the web page and define the basic width: use PS or FW to assist the line measurement and set in base.css. 4. Use of Sprite chart:

  • It is available at icomon. IO.
  • Copy the contents in the fonts folder to the root directory of the project.
  • Add the I label where you want to use it. Paste the copied content into the demo. HTML file in the original download file.
  • Declare the font, open the style. CSS file in the original unzip file, paste the top declaration code @font-face{} above base.css and remember to change the reference path as needed.
  • Set the font type in the I TAB where you want to use the Sprite
font-family:'icomoon';
Copy the code
  • To append the wizard image, open the original url, click the “Import Icons” button in the upper left corner and select the selection. Json Import from the original download file. To add the download again, unzip the Icons and overwrite the original fonts folder with the new fonts folder. Font-family :”icomoon”; font-family:”icomoon”;

2018/11/9

1. The home page of JINGdong is as follows:

  • Head Advertising (Super Category Day)

  • Quick navigation bar (city, login, registration, etc.)

  • Middle header (logo, search box button, shopping cart, hot keywords, small navigation bar, small advertisement, six areas in total)

  • Middle part (left, center, right)

  • The bottom part (upper and lower parts, separated by gray horizontal line) 2.

  • Create a new box that spans the entire screen. Advertising is only effective in the center of the area click, so embedded a link to store advertising.

  • When the advertisement image is installed in the IMG tag, the image will automatically prop up the A tag or be used as the background image. However, the A tag should be set as a block-level element and the width and height should be set before the background image can be used. 3. Gray quick navigation bar

  • Quick navigation also has a full-bar box across the screen, but the main content is in the center area, the center area has a pressed logo, a box on the left shows the city floating left, a box on the right shows login registration information floating right. The bottom line of the quick navigation bar can be set to border-bottom for the box.

  • Ul boxes are used for both boxes, li boxes are used to store content, vertical lines are made, and left floats are set. List-style :none; Ul is a block-level element with an inner and outer margin by default, which is also cleared.

  • View the text in the quick navigation bar of the original web page and set the font size to the center of the text.

  • Since the ul box in the first city is a certain distance from the left side of the center, it can be realized by setting the left margin margin-left for the UL box.

  • For a label color, font size, underline and other nearly uniform standards can be set separately, applicable to all a labels.

  • For the right side of the TWO-DIMENSIONAL code and mobile jingdong this LI is together, so in that LI add an IMG label to store the two-dimensional code. To absolute positioning of the qr code, in the use of positioning write position attribute, want to get into the habit of joint, write down the top | bottom left | right attribute, the initial value is set to 0. 4. Pay attention to the middle part:

  • A. H1 is written to increase the weight and facilitate search engine optimization. When attaching a logo to label A, convert label A to block and set the width and height of label A to the same size as the logo. The logo can be used as the background image of label A

background: #fff url(.. /images/logo.png) no-repeat;
Copy the code

H1 also has a margin as a block-level element, which also needs to be cleared. Also, add a shadow effect to the logo or other images

Box - shadow: 2 p 5 px 5 px rgba (0, 0,. 3);Copy the code
  • Search box: The “button” tag has the same effect as the “button” attribute value of the “text” tag in the “input” tag, but the “button” tag has the same effect as the “button” attribute value in the “input” tag. Input and button clear border and outline borders.
input,button{
    border:0;
    outline:none;
}
Copy the code

The input and button tags are not perfectly snug. There are gaps between them, and even the exact width will be squeezed out of the outer box. Use float to make it snug. Padding-left input to placeholder will increase the width. You can manually reduce the width value or change box-sizing to border-box. For those that need to clear the inner and outer borders and margins, copy and paste

Blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, and h6, hr, input, legend, li, ol, p, the pre, td, textarea, th, ul {margin: 0; padding:0; }Copy the code

Added absolute positioning, fixed positioning and floating inline elements to set width and height directly.

  • For font-weight values, use numbers like 700 instead of bold, and margin-right supports negative values. 5. Points for making the bottom part:

  • “How fast, how cheap” is a Sprite that is presented on a picture and needs to be displayed as needed. To use:
background-position:-Xpx -Ypx | bottom;
Copy the code

X and Y are the positions of the upper left corner in some pictures.

  • The Sprite picture is stored in the H5 tag. If there is text in the H5 tag, it can be hidden by indenting the first line in addition to deleting it.
text-indent:-999px;
Copy the code

Out of the display area.

2018/11/10

1. For single-column or single-line lists, think ul>li or p(text-align,line-height); For multiple rows and columns, think dl>dt>dd. 2. The top part and the bottom part of jingdong home page are common, but the middle part is not consistent, at this time, it is necessary to create a NEW CSS style file, in order to separate implementation, do not mix together. 3. For ul> Li > A structure, if the cell of LI needs to be one color and the text has a margin, the inner margin of Li needs to be set to create a distance so that the text is not marginal (it can be seen under the hover effect), and the padding-top of UL is used to make the upper and lower distance. You can set height to li and use line-hight to center the text.

2018/11/12

1. For the img tag, if the div is nested outside, the img edge can only reach the border, leaving a gap. You can use display:block. Or vertical – align: top; To solve. 2. Practice, practice, memorize.

Finished product Display: