Layout control

Loading...

来自 University of London 的课程

响应式网站基础：HTML、CSS 与 JavaScript

2701 个评分

University of London

响应式网站基础：HTML、CSS 与 JavaScript

2701 个评分

课程 1（共 6 门，Specialization Responsive Website Development and Design）

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes

从本节课中

CSS

Welcome to the second module of 'Responsive website basics'. <p>In this section of the course we will have a look at linking external CSS files to your HTML documents, controlling fonts with CSS and using CSS to customise hyperlink formatting and to control text layout. We will also install the bootstrap library and implement a responsive grid layout- Enjoy! <p> - Matthew, Marco and Kate

Layout control6:11

CSS media queries8:11

与讲师见面

Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London
Dr Marco Gillies
Senior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate Devlin
Senior Lecturer
Department of Computing, Goldsmiths

[MUSIC]

So you're doing really well with the CSS here.

We can now control fonts and colors, and we can customize our links, and

we're really gaining control over how our page looks in the web browser.

What we're going to do now is just take a step back and

consider how we can actually change the layout of the document a little bit

by using margins and borders and so on.

Because often you might want to add some more elaborate design elements to your

page and, so this is how we're gonna do it.

We're gonna actually introduce a new type of construct in CSS called Coder Class.

So let's just see how that works.

So instead of writing the name of a tag here what

we can do is we can write anything we like.

And I'm gonna call this one indent.

And so you notice I've got a full stop and

then name so we can basically put anything here.

But, as I said, I'm gonna put .indent here, but

as long as it hasn't got spaces in.

And my .indent is gonna say margin-left:10px; okay?

So you might be guessing already what that's gonna do.

Margin-left, ten pixels, right.

So it's probably gonna have a margin on the left which is ten pixels in

size, right?

Let's see how we can use it.

I'm gonna go down into this index file here, which we're looking at on the left,

and actually see if I can create some paragraphs with an indent.

And this is how I do it.

So if I've specified a class, now I just need to do this.

Inside my p tag I've added a bit of code to tell it which class I'm gonna use.

And you can see, when I reloaded the page,

that actually now I have an indent in the paragraph.

And let's just say we had some more text in there.

And we reload.

You can see that the whole of that paragraph is now indented.

This might be a slightly unusual way to do it.

Normally, you'd maybe indent the first line, and then after that, stop indenting.

Well, we can do that too.

So we can actually just specify that maybe the indent is only on here.

So span class="indent" and /span.

Let's see what that does.

So now, I've just, sort of wrapped up the word "The" in a special indent.

So did you see that?

So now only the first word is indented but then the indent effects the rest

of the line but then not the rest of the paragraph which is quite a neat trick.

So that's kind of more how you would do typesetting in a book or

something like that, you might have an indentation.

It's a nice way of doing typesetting standard way.

So that's using classes.

And I could actually do all kinds of things and so

you can imagien there's all kinds of margins you can specify.

I'm gonna make a class called gap below,

and that's gonna have margin-bottom:25px;.

And so if I set my paragraph as being

"gap_below" and I make sure I've saved both my files.

Did you see that the second paragraph jumped down.

So gap_below is this new class that has a margin at the bottom.

So the margin is a really good way of shoving things around.

And it can be really powerful.

It's actually, as you'll see when we look at the bootstrap library in a later

lesson, actually margins are really the way to

control exactly where everything is on the page.

Let's just see if we can mess around with navigation.

So we can actually specify different classes of link, of course, as well.

So you might want to, you don't just have to have one link type,

you could actually have another link type.

So we could call it greenlink.

So when they hover over a green link, we do want that color,

we'll do something else.

So color is going to be green.

So it's just to show you that you can have different types of links.

And on your only selectors you can specify the hover thing as well.

So let's say in my nav bar, class="green_link".

And save that.

Oh, no underscore, "greenlink", like that.

Reload.

So I've now got different types of links.

You can use that maybe to differentiate the different areas of the site.

So you can set classes on anything.

And actually once you've defined the class,

you can apply that class to a different tags.

Whereas before we were just setting up the styles for say, the body tag.

In which case, only the body tag can take on those styles.

But with classes, with these dot class name things, we can set up

styles for any bit of the text that we want.

Especially when we use that span class, which allows us to cut in,

put a style on just one bit of text to emphasize it or to indent it, as we saw.

And we saw that we can use margins to kind of shove things around on the page.

[MUSIC]

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取